[英]Fetch: I see the response in the DevTools but Fetch still gives me an "Access-Control-Allow-Origin" issue for GET
So I have an issue regarding fetch
and Access-Control-Allow-Origin
.所以我有一个关于
fetch
和Access-Control-Allow-Origin
。
I try to fetch some site like this:我尝试获取一些这样的网站:
fetch('https://localhost/.../api/json')
.then(blob => blob.json())
.then(data => console.log("data:", data))
.catch(err => console.log("err: ", err));
So in the Chrome Network tab, I see that apparently there was no issue.所以在 Chrome 网络标签中,我看到显然没有问题。 However, in JavaScript code, I get
CORS
issues.但是,在 JavaScript 代码中,我遇到了
CORS
问题。 How is that even possible?这怎么可能呢? See:
看:
I tried adding mode: 'cors'
it does not help.我尝试添加
mode: 'cors'
它没有帮助。 I tried adding mode: 'no-cors'
yes it goes through but I can't read the answer in this case I get Unexpected end of input
and the 'blob'
variable is empty anyway.我尝试添加
mode: 'no-cors'
是的,它通过了,但在这种情况下我无法阅读答案,我得到了Unexpected end of input
无论如何'blob'
变量是空的。
If I do the same GET request without any options or headers using Postman
or Curl
it works like a charm and I get my response.如果我使用
Postman
或Curl
在没有任何选项或标题的情况下执行相同的 GET 请求,它就像一个魅力,我会得到我的回应。
Do you have any idea?你有什么主意吗? Thanks in advance
提前致谢
Edit: Since it is working on Postmann
and Curl
and since I can see the response in the Chrome Debugger, I don't think that it is a duplicate of another question where the request clearly goes to an external URL that does not allow to be accessed from somewhere else.编辑:由于它正在处理
Postmann
和Curl
并且因为我可以在 Chrome Debugger 中看到响应,我认为它不是另一个问题的重复,其中请求明确转到不允许的外部 URL从其他地方访问。 Right?对?
Edit2: Could it potentially have to do that the address: https://localhost
is self-signed and thus has no valid certificate? Edit2:它可能必须这样做地址:
https://localhost
是自签名的,因此没有有效的证书? In curl
I had to add --insecure
flag.在
curl
我必须添加--insecure
标志。
As pointed out by TJ Crowder, this is impossible to do in the browser .正如 TJ Crowder 所指出的,这在浏览器中是不可能做到的。 See related resources:
查看相关资源:
But, do not despair!但是,不要绝望! There is a workaround :
有一个解决方法:
We are going to use a node server calling cURL
to bypass the restriction:我们将使用调用
cURL
的节点服务器来绕过限制:
You'll need nodejs with npm.您将需要带有 npm 的 nodejs。
npm init
and npm i -S express
npm init
和npm i -S express
api.js
file.api.js
文件。 With following code: 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
node api.js
运行服务器localhost:3000
adding the url you want to make the get
request to in the query parameters.localhost:3000
发出请求,并在查询参数中添加要向其发出get
请求的 url。 Example: 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));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.