成功的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软件包是预先编写的，成熟的，经过测试的中间件，您可以使用它来代替重新发明轮子。