提问者:小点点

我有cors问题与heroku应用程序,发送请求从github页面


你好,我已经创建了一个小的nodejs应用程序,用于邮寄目的,并将其部署在Heroku上。

我的前端有一个联系人表单,它是使用github页面托管的。 我在我的后端启用了cors,但是当我提交表单时,我仍然得到cors错误。

这是我的后端的一段代码。

const nodemailer = require("nodemailer");
const bodyParser = require("body-parser");
const cors = require("cors");

const app = express();

app.use(cors());

app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept, Authorization"
  );
  res.setHeader(
    "Access-Control-Allow-Methods",
    "GET, POST, PATCH, DELETE, OPTIONS, PUT"
  );
  next();
});

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.post("/contact", (req, res, next) => {
  const transporter = nodemailer.createTransport({
    service: "gmail",...

我在前台的请求是这样的。

    e.preventDefault()
    if (formState.formIsValid) {
      setIsSending(true)
      axios
        .post(
          "https://portfolio-kk-mail.herokuapp.com/contact",
          {
            sender: formState.inputValues.email,
            subject: formState.inputValues.subject,
            message: formState.inputValues.message,
          },
          {
            headers: {
              "Content-Type": "application/json",
            },
          }
        )
        .then(res => {
          setIsSending(false)
          setError(false)
          submitBtn.current.style.background =
            "linear-gradient(to right, #4BB543, #4BB54344)"
          submitBtn.current.style.border = "1px solid #4BB543"
        })
        .catch(err => {
          setIsSending(false)
          setError(true)
          submitBtn.current.style.border = "1px solid #B00020"
          submitBtn.current.style.background =
            "linear-gradient(to right, #B00020, #B0002044)"
        })
    }
}

我一点头绪都没有,我错过了什么?


共1个答案

匿名用户

因为您正在将content-type设置为JSON,所以CORS请求自动成为预取请求。 唯一不需要预飞行的内容类型是:

application/x-www-form-urlencoded
multipart/form-data
text/plain

因为浏览器将您的请求归类为预排请求,所以它会向您的服务器发送一个选项请求,以检查该请求是否被允许。 您需要在服务器上为此设置一个处理程序。

app.options('/contact', (req, res) => {
    res.sendStatus(204);
});

只需将其放在CORS中间件之后即可。

您可以在MDN上的那些参考文献中阅读关于未预处理的简单请求的条件,也可以阅读关于预处理的请求的内容。

相关问题