Question

我已经尝试过在CORS问题上找到的所有内容，但我似乎无法解决它。我使用带有Express.js API的React.js应用程序来处理邮件程序功能。在本地运行时，我确实得到了CORS问题并解决了这个问题：

＆＃13;

const cors = require('cors')

app
  .use(cors())
  .use(bodyParser.urlencoded({ extended: true }))
  .use(bodyParser.json())
  .use(mailer)

＆＃13;

我将React app和Express API部署到Heroku，然后突然又开始出现CORS错误：

否＆＃39;访问控制 - 允许 - 来源＆＃39;标头出现在请求的资源上。起源＆＃39; https：//...'因此不允许访问。响应的HTTP状态代码为503。

所以我尝试了几种不同的方法来使它工作，但没有一个有用，一些例子：

＆＃13;

app
  .use(bodyParser.urlencoded({ extended: true }))
  .use(bodyParser.json())
  .use(function (req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', 'https://florismeininger.herokuapp.com');
    res.setHeader('Access-Control-Allow-Methods', 'POST, OPTIONS');
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
    res.setHeader('Access-Control-Allow-Credentials', true);
    next();
      });
  .use(mailer)

＆＃13;

app
  .use(cors({origin: 'https://florismeininger.herokuapp.com'}))
  .use(bodyParser.urlencoded({ extended: true }))
  .use(bodyParser.json())
  .use(mailer)

＆＃13;

app
  .use(cors({origin: '*'}))
  .use(bodyParser.urlencoded({ extended: true }))
  .use(bodyParser.json())
  .use(mailer)

＆＃13;

因此，对于预检OPTIONS请求，这是一个503错误。我通过使用multipart / form-data并附加正文来处理此请求：

＆＃13;

    var data = new FormData()
    data.append('body',body)

        api.post('/mailer', { attach: body })

＆＃13;

现在我收到了新的POST 503错误以及此错误：

无法加载https://florismeininger-mailer-api.herokuapp.com/mailer：否＆＃39;访问控制 - 允许 - 来源＆＃39;标头出现在请求的资源上。起源＆＃39; https://florismeininger.herokuapp.com＆＃39;因此不允许访问。响应的HTTP状态代码为503.如果不透明的响应符合您的需求，请将请求的模式设置为“no-cors＆＃39;在禁用CORS的情况下获取资源。

我尝试使用＆＃39; no-cors＆＃39;模式也不起作用。继续获取No＆＃39; Access-Control-Allow-Origin＆＃39;标题存在错误。

Answer 1

如果您收到503响应CORS预检OPTIONS请求，那么就像@sideshowbarker评论一样，问题是您的Web服务器（Apache或其他）可能不允许OPTIONS请求方法。< / p>

将Express.js API部署到Heroku后出现CORS问题

1 个答案: