使用Express.js和jQuery.ajax的CORS

Question

我使用express.js作为我的服务器，带有以下标题：

x-powered-by: Express
connection: keep-alive
content-length: 2
content-type: application/json; charset=utf-8
access-control-allow-methods: GET,PUT,POST,DELETE
access-control-allow-origin: *
access-control-allow-headers: x-requested-with

我调用res.header以允许CORS:

res.header("Access-Control-Allow-Origin:", "*");
res.header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE");  
res.header("Access-Control-Allow-Headers", "x-requested-with");

您可以在此处进行测试：http://my-api.rs.af.cm/api/products

对于我的前端，我使用jsbin，并使用$.ajax调用我的服务器：http://jsbin.com/apizez/37/edit

此处显示结果：http://jsbin.com/apizez/37

你可以看看JS控制台，你会看到这个错误：

XMLHttpRequest cannot load http://my-api.rs.af.cm/api/products. Origin http://jsbin.com is not allowed by Access-Control-Allow-Origin.

我在CORS上阅读了所有其他答案，我不想使用easyXDM。

Answer 1

感谢Ryan Olds帮助我了解CORS请求是如何工作的。

这里是正确的标题：

res.header('Access-Control-Allow-Origin', req.headers.origin || "*");
res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,HEAD,DELETE,OPTIONS');
res.header('Access-Control-Allow-Headers', 'content-Type,x-requested-with');

我所有的请求都有相应的标题。

我将$.getJSON用于jQuery的GET请求，否则它不起作用。

您可以在此处看到示例：http://jsbin.com/uwevuc/2/edit

http://jsbin.com/uwevuc/2

Answer 2

您还必须考虑您的飞行前请求。我建议你加上"；cors"；npm包，并使用以下配置启动它：

const cors = require('cors');
app.use(cors({
    credentials: true,
    preflightContinue: true,
    methods: ['GET', 'POST', 'PUT', 'PATCH , 'DELETE', 'OPTIONS'],
    origin: true
});

这将使用列出的方法为任何地址启用跨来源请求。origin参数非常灵活，例如，您可以分隔一组地址、所有地址或通过regex。这是包文档：

https://expressjs.com/en/resources/middleware/cors.html