成功的POST请求后引发“在请求的资源上没有'Access-Control-Allow-Origin'标头”错误

Question

我正在尝试设置一个API来接收CORS POST请求，并且已经达到成功发布数据的地步，但是我收到一个错误消息：“ CORS策略阻止了对XMLHttpRequest的访问：否'Access- “ Control-Allow-Origin”标头出现在所请求的资源上。” 这导致AJAX调用返回错误状态，而不是成功状态。

这是客户端上的AJAX调用：

$.ajax({
  type: 'POST',
  url: '<my-server-url>',
  data: JSON.stringify(data),
  contentType: 'application/json',
  success: function(res) {
    console.log(res);
    $('#contactForm').find('.submissionMessage').html('<p>Thanks for registering!</p>').show();
  },
  error: function(err) {
    console.log(err);
    $('#contactForm').find('.submissionMessage').html('<p>Something went wrong with the form submission.</p>').show();
  },
  timeout: 10000
});

这是服务器端的API：

function registerNewUser(req, res, next) {
  adminFunctions.newUser(req.body.email, req.body.password, req.body.name, req.body.first, req.body.last,
    req.body.phone, req.body.company, req.body.stateOrProvince, req.body.jobTitle, 
    req.body.token,
    function registeringUser(err, success) {
      var jsonResponse = {
        error: err,
        success: success
      };
      var httpStatus = 201;
      if (err == 'Error: Failed to provide sign-up token.') {
        httpStatus = 401;
      } else if (err == 'Error: User with that email already exists.') {
        httpStatus = 409;
      } else if (err) {
        httpStatus = 500;
      }
      res.status(httpStatus).json(jsonResponse);
    });
}
router.post('/users', rateLimit, registerNewUser);

router.options('/users', rateLimit, function(req, res) {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'POST');
  res.setHeader('Access-Control-Allow-Credentials', true);
  res.setHeader('Access-Control-Max-Age', '86400'); // 24 hours
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept');
  res.end();
});

我已经在AJAX调用中尝试将响应dataType设置为“ jsonp”，但在到达服务器之前却收到404错误。

我还尝试在AJAX调用中的URL前面加上cors-anywhere API的前缀，但是在到达服务器之前，它还会给我一个404。

似乎发送成功响应的唯一一件事是，当我启用Allow-Control-Allow-Origin Chrome扩展程序时，该扩展程序显然只能用于测试目的。

Answer 1

您可以通过一系列函数调用来添加CORS权限：

 res.setHeader('Access-Control-Allow-Origin', '*');

…但是这些全都只在对预检OPTIONS请求的响应上。

他们必须出现在两个预检OPTIONS请求，并与所请求的资源的响应。

您尚未将它们包括在对POST请求的响应中。

这是使用中间件最容易实现的，因此您不必重复调用以标头的形式。该cors软件包是预先编写的，成熟的，经过测试的中间件，您可以使用它来代替重新发明轮子。