使用 HTML5获取 API 允许访问-控制-允许-起源头

我正在使用 HTML5获取 API。

var request = new Request('https://davidwalsh.name/demo/arsenal.json');


fetch(request).then(function(response) {
// Convert to JSON
return response.json();
}).then(function(j) {
// Yay, `j` is a JavaScript object
console.log(JSON.stringify(j));
}).catch(function(error) {
console.log('Request failed', error)
});

我能够使用正常的 json，但无法获取上述 api 网址的数据。 它抛出了错误:

获取 API 无法加载 https://davidwalsh.name/demo/arsenal.json。请求的资源上没有“访问控制-允许-起源”标头。因此，不允许访问起源“ http://localhost”。如果一个不透明的响应满足您的需求，将请求的模式设置为“ no-CORS”，以便在禁用 CORS 的情况下获取资源。

425371 次浏览
小开

正如 epascarello 所说，承载资源的服务器需要启用 CORS。您在客户端可以做的(可能也是您正在考虑的)是将提取模式设置为 CORS (尽管我认为这是默认设置) :

fetch(request, {mode: 'cors'});

但是这个 还是也需要服务器启用 CORS，并允许您的域请求资源。

看看 CORS 文件和这个 超赞的 Udacity 视频解释了 同一原产地政策。

您也可以在客户端使用 no-cors 模式，但这只会给您一个不透明的响应(您无法读取正文，但响应仍然可以由服务工作者缓存或由某些 API 使用，如 <img>) :

fetch(request, {mode: 'no-cors'})
.then(function(response) {
console.log(response);
}).catch(function(error) {
console.log('Request failed', error)
});
小开

本地环境问题的解决方案

我的前端代码在 http://localhost:3000运行，API (后端代码)在 http://localhost:5000运行

正在使用提取 API 来调用 API。最初，它抛出了“ cors”错误。 然后在我的后端 API 代码中添加以下代码，允许来自任何地方的源代码和头代码。

let allowCrossDomain = function(req, res, next) {
res.header('Access-Control-Allow-Origin', "*");
res.header('Access-Control-Allow-Headers', "*");
next();
}
app.use(allowCrossDomain);

但是，在其他环境如舞台、点击等情况下，必须限制起源。

高等环境严格 NO 。

小开

我知道这是一篇较早的文章，但是我发现我修复这个错误的方法是使用我的服务器的 IP 地址，而不是在我的提取请求中使用域名。 例如:

#(original) var request = new Request('https://davidwalsh.name/demo/arsenal.json');
#use IP instead
var request = new Request('https://0.0.0.0/demo/arsenal.json');


fetch(request).then(function(response) {
// Convert to JSON
return response.json();
}).then(function(j) {
// Yay, `j` is a JavaScript object
console.log(JSON.stringify(j));
}).catch(function(error) {
console.log('Request failed', error)
});
小开

如果你正在使用 nginx 尝试这个

#Control-Allow-Origin access


# Authorization headers aren't passed in CORS preflight (OPTIONS) calls. Always return a 200 for options.
add_header Access-Control-Allow-Credentials "true" always;
add_header Access-Control-Allow-Origin "https://URL-WHERE-ORIGIN-FROM-HERE " always;
add_header Access-Control-Allow-Methods "GET,OPTIONS" always;
add_header Access-Control-Allow-Headers "x-csrf-token,authorization,content-type,accept,origin,x-requested-with,access-control-allow-origin" always;


if ($request_method = OPTIONS ) {
return 200;
}
小开

这对我很有效:

npm install -g local-cors-proxy

API 端点，我们希望请求它具有 CORS 问题:

https://www.yourdomain.com/test/list

开始代理:

lcp --proxyUrl https://www.yourdomain.com


Proxy Active


Proxy Url: http://www.yourdomain.com:28080
Proxy Partial: proxy
PORT: 8010

然后在您的客户端代码中，新的 API 端点:

http://localhost:8010/proxy/test/list

最终结果将是一个没有 CORS 问题的 https://www.yourdomain.ie/test/list请求！

小开

请查看 < a href = “ https://Expressjs.com/en/resources/midware/cors.html”rel = “ nofollow norefrer”> https://expressjs.com/en/resources/middleware/cors.html 你必须用 Cors。

安装:

$ npm install cors

const cors = require('cors');
app.use(cors());

您必须将此代码放在节点服务器中。

小开

您需要在请求数据的服务器端设置 cors 头。 例如，如果您的后端服务器在 Rubyonails 中，请在发送回应之前使用以下代码。应该为任何后端服务器设置相同的头。

headers['Access-Control-Allow-Origin'] = '*'
headers['Access-Control-Allow-Methods'] = 'POST, PUT, DELETE, GET, OPTIONS'
headers['Access-Control-Request-Method'] = '*'
headers['Access-Control-Allow-Headers'] = 'Origin, X-Requested-With, Content-Type, Accept, Authorization'

提交答案