部署后 HEROKU 出现 CORS 问题

Question

所以我的 node.js 服务器连接到我的 React 应用程序，它在本地工作得很好。当我将服务器部署到 Heroku 并使用本地 React 应用程序中已部署应用程序的 URL 更改 localhost 时，我收到了这个可爱的 CORS 预检请求错误。我最初认为这是我的环境变量的问题，但似乎并非如此。这是节点服务器。

    const express = require("express");
const bodyParser = require("body-parser");
const cors = require('cors');
require("dotenv").config();
const app = express();
const port = process.env.PORT || 8000;

app.use(express.static(__dirname + 'public'));

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

var nodemailer = require("nodemailer");

var transporter = nodemailer.createTransport({
  service: "gmail",
  auth: {
    user: process.env.GM_USER,
    pass: process.env.GM_PASS,
  },
});

app.post("/send", (req, res) => {
  var mailOptions = {
    from: req.body.email,
    to: "test@gmail.com",
    subject: `Hello this is ${req.body.name}`,
    text: `${req.body.message}, 
    From, ${req.body.name}`,
  };

  transporter.sendMail(mailOptions, function (error, info) {
    if (error) {
      console.log(error);
    } else {
      console.log("Email sent: " + info.response)
      .then(res => res.status(200).send(res));
    }
  });
});

// require("./routes/apiRoutes")(app)

app.listen(port, () => {
  console.log(`Server is listening to port ${port}`);
});

我看过，似乎人们也遇到过类似的问题，但我似乎找不到解决方案。如果有人可以提供帮助，那就太棒了。谢谢。

Answer 1

你可以这样使用。

var allowCrossDomain = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');

    // intercept OPTIONS method
    if ('OPTIONS' == req.method) {
      res.send(200);
    }
    else {
      next();
    }
};

...
app.use(allowCrossDomain);
...

Answer 2

您已经在处理CORS，我遇到了同样的问题，我认为您应该测试您的服务器日志。在我的情况下，我遇到了一些其他的包问题，它给出了500 错误以及没有'Access-Control-Allow-Origin' 标头，CORS 错误。当我修复该问题时，CORS 也得到了解决。

或者您可以尝试拦截每个请求并为每个响应设置它。

app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", '*');
res.header("Access-Control-Allow-Credentials", true);
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
res.header("Access-Control-Allow-Headers", 'Origin,X-Requested-With,Content-Type,Accept,content-type,application/json');
next();
});