时间戳

首页 > 解决方案 > CORS 阻止的来源 - 来源和允许的来源相同

javascript - CORS 阻止的来源 - 来源和允许的来源相同

问题描述

在 localhost 上使用 dockerized Ory Kratos 和 Angular（通过 nginx 托管的 www 文件夹以便能够修改标头）并尝试执行

const headers = {
   Accept: 'application/json',
};
fetch('http://127.0.0.1:4433/self-service/registration/browser', {
  method: 'GET', 
  headers,
  redirect: 'follow',
  credentials: 'include',
})
.then((r) => console.log(r))
.catch((f) => console.log(f));

导致

访问 'http://127.0.0.1:8100/auth/register?flow=b35c3f9a-5592-4121-80b9-87503c38e1d3' 获取（重定向自 'http://127.0.0.1:4433/self-service/registration /browser') 来自 'http://127.0.0.1:8100' 的来源已被 CORS 策略阻止：'Access-Control-Allow-Origin' 标头的值 'http://127.0.0.1:8100'不等于提供的原点。让服务器发送带有有效值的标头，或者，如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

http://127.0.0.1:4433/self-service/registration/browser通过 302 HTTP 响应重定向到http://127.0.0.1:8100/custompath/register?flow=[some-flow-id] 。浏览器尝试解析重定向并抛出上述错误。

起源和允许的起源是相同的- 那么这个错误怎么会发生呢？我已经在 stackoverflow 上找到了这个答案：https ://stackoverflow.com/a/62320912/14345380 ，如果这有帮助的话。

Chrome 版本 87.0.4280.88

编辑#1 网络选项卡输出可以在 这里看到

编辑#2 为了能够自己解决问题，我设置了一个小存储库：在这里找到它

编辑 #3 感谢pandamakes的提示。测试 repo 不在 :8100 上运行，而是在 4200 上运行（从 ionic 项目切换到 angular 项目）。

编辑 #4 我在 ory/kratos 项目起源这里开始了另一个讨论。Ory 团队实现了一个 SDK，我们可以使用它来代替普通的 fetch 请求。

标签： javascriptangulardockergoogle-chrome

解决方案

我……我想我明白了……

302 重定向有效，但是当 fetch 请求跟随重定向时，它现在尝试获取非 cors 资源。在这种情况下，它不会附加Origin请求标头（因为它是非 CORS 请求）。

当响应到达时，浏览器会将access-control-allow-origin标头（如果存在）与请求的来源进行比较。如果响应头存在，并且不是*，它必须匹配origin请求的头。

所以解决你的问题，你需要access-control-allow-origin在你的 nginx 设置中删除，或者将它设置为*

最小复制：https ://github.com/xgui3783/cors-min-repro

推荐阅读