Fetch: I see the response in the DevTools but Fetch still gives me an quot;Access-Control-Allow-Originquot; issue for GET(FETCH:我在DevTools中看到了响应,但FETCH仍然给我一个Quot;Access-Control-Allow-Origin-Get问题)
问题描述
所以我有一个关于fetch和Access-Control-Allow-Origin的问题。
我尝试获取一些站点,如下所示:
fetch('https://localhost/.../api/json')
.then(blob => blob.json())
.then(data => console.log("data:", data))
.catch(err => console.log("err: ", err));
所以在Chrome Network选项卡中,我看到显然没有问题。
但是,在JavaScript代码中,我遇到了CORS问题。这怎么可能呢?请参阅:
我尝试添加mode: 'cors'但无济于事。我尝试添加mode: 'no-cors'是的,但我无法读取答案。在这种情况下,我得到Unexpected end of input,而且'blob'变量无论如何都是空的。
如果我使用Postman或Curl在没有任何选项或标头的情况下执行相同的GET请求,则它会像符咒一样工作,我会得到响应。
你知道吗? 提前感谢
编辑:由于它在Postmann和Curl上工作,而且我可以在Chrome调试器中看到响应,我不认为它是另一个问题的副本,在这个问题中,请求明显地到达了不允许从其他地方访问的外部URL。对吗?
curl中,我必须添加--insecure标志。
推荐答案
正如T.J.Crowder所指出的,这是不可能在浏览器中完成的。请参阅相关资源:
- https://en.wikipedia.org/wiki/Same-origin_policy#Security_Applications
- https://www.w3.org/TR/access-control/
- https://blogs.msdn.microsoft.com/ieinternals/2009/08/28/same-origin-policy-part-1-no-peeking/
但是,不要绝望!有一个解决办法:
cURL服务器解决方法:
我们将使用调用cURL的节点服务器绕过限制:
您将需要带有NPM的NodeJS。
- 执行
npm init和npm i -S express - 添加
api.js文件。代码如下:
const https = require("https");
const express = require('express');
const app = express();
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
app.get('/', function (req, res) {
const exec = require('child_process').exec;
exec('curl ' + req.query.url + ' --insecure', function (error, stdout, stderr) {
console.log('stdout: ' + stdout);
console.log('stderr: ' + stderr);
res.json(stdout);
if (error !== null) {
console.log('exec error: ' + error);
}
});
});
app.listen(3000, function () { console.log('listening on port 3000!'); });
- 通过
node api.js运行服务器
- 现在,在您的代码中,您可以请求
localhost:3000在查询参数中添加要向其发出get请求的url。示例:
fetch('http://localhost:3000/?url=https://HOST/.../api/json')
.then(blob => blob.json())
.then(data => console.log("data:", data))
.catch(err => console.log("err: ", err));
- 请求者现在可以正常工作了。尽情享受。
这篇关于FETCH:我在DevTools中看到了响应,但FETCH仍然给我一个&Quot;Access-Control-Allow-Origin-Get问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:FETCH:我在DevTools中看到了响应,但FETCH仍然给我一个&Quot;Access-Control-Allow-Origin-Get问题
基础教程推荐
- 最佳动态 JavaScript/JQuery 网格 2022-01-01
- 从快速中间件中排除路由 2022-01-01
- 当木偶师打开Chrome时,不能使用Chrome扩展 2022-01-01
- 即使每次插入第一个输入的值不同,第二个输入仍显示相同的输入值 2022-01-01
- 使用 jQuery 在悬停时交换 DIV 类 2022-01-01
- HTML5 画布调整为父级 2022-01-01
- CORS:当凭据标志为真时,无法在 Access-Control-Allow-Origin 中使用通配符 2022-01-01
- 逻辑运算符 ||在 javascript 中,0 代表 Boolean false? 2022-01-01
- 在 Javascript 中使用 Fetch API 上传文件并显示进度 2022-01-01
- 带角度的选项卡:仅使用 $http 在单击时加载选项卡 2022-01-01
