Javascript Fetch：我在DevTools中看到了响应，但是Fetch仍然给了我一个"；“访问控制允许来源”；发行

因此，我有一个关于

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的网络标签中，我发现显然没有问题。 然而，在JavaScript代码中，我遇到了

CORS

问题。这怎么可能呢？见：

我尝试添加

模式：“cors”

它没有帮助。我尝试添加

模式：'no cors'

是的，它通过了，但我无法读取答案。在这种情况下，我得到了

输入的意外结束

，并且

'blob'

变量仍然为空

如果我使用

Postman

或

Curl

在没有任何选项或标题的情况下执行相同的GET请求，它就像一个符咒一样工作，我会得到响应

你知道吗？ 提前谢谢

编辑：由于它正在处理

Postmann

和

Curl

，而且我可以在Chrome调试器中看到响应，因此我不认为这是另一个问题的重复，在这个问题中，请求显然指向不允许从其他地方访问的外部URL。对吧?

---

Edit2:它可能必须这样做吗地址：

https://localhost

是自签名的，因此没有有效的证书？在

curl

中，我必须添加

--不安全的
标志
 正如T.J.Crowder所指出的，这在浏览器中是不可能做到的。见相关资源：






但是，不要绝望！有一个解决办法：

cURL服务器解决方案：
我们将使用一个调用
cURL
的节点服务器来绕过限制：

您将需要npm的nodejs


执行
npm init
和
npm i-S express
添加一个
api.js
文件。代码如下：

const https=require（“https”）；
const express=require（'express'）；
常量app=express（）；
应用程序使用（功能（请求、恢复、下一步）{
res.header（“访问控制允许原点”、“*”）；
res.header（“访问控制允许头”、“来源、X请求、内容类型、接受”）；
next（）；
});
app.get（'/'，函数（req，res）{
const exec=require（'child_process'）。exec；
exec（'curl'+req.query.url+'--unsecure'，函数（错误、标准输出、标准输出）{
log（'stdout:'+stdout）；
log（'stderr:'+stderr）；
res.json（标准输出）；
如果（错误！==null）{
log（'exec error:'+error）；
}
});
});
app.listen（3000，函数（）{console.log（'listening on port 3000！'）；}）；


通过
节点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））；


请求程序现在正在按预期工作。享受
“那我能做什么呢？”你无能为力。服务器必须授权请求，否则浏览器将阻止代码看到响应。这就是and的工作原理。@T.J.Crowder请解释为什么它在
Postman
或
Curl
中工作，以及为什么我可以在浏览器调试器中看到答案？对我来说似乎不正确&似乎不重复。这已包含在链接问题的答案中，请务必花时间阅读它们。请注意上面我的评论中的一点“…否则浏览器将阻止您的代码看到响应…”Postman和Curl等不是浏览器。SOP是一个特定于浏览器的东西。@T.J.Crowder我想知道当我仍然可以在浏览器网络选项卡中看到答案时，保护在哪里（见图）。它不应该返回某种错误吗？如果您仍然可以看到响应，但在JS中看不到响应，那么好处何在？因此，如果您所说的是真的（我不太清楚），那么实际上至少有可能获取请求：在引擎盖下安装另一个使用
curl
的api服务器。然后，您将开始联系api2，它在api1上使用curl并将数据从api1传递回客户端。我星期一试试。90%肯定行得通。然后我不明白为什么浏览器在我可以绕过它的时候首先阻止了直接获取。