CORS 阻止 javascript 同源获取请求

Question

我制作了一个 javascript 应用程序，它在页面加载时获取 JSON 文件。一切对我和大多数用户来说都很好。但对于某些人来说，提取请求被 CORS 阻止，因为 'Access-Control-Allow-Origin' header 的值不等于提供的来源。

你可以在这里试试：https://limeshark.dev/editor

我的fetch请求：

var t = await fetch('https://limeshark.dev/t/', {method: 'GET'});

（我在另一个页面上提出相同的请求（即 https://limeshark.dev/editor/Neutron）但没有人报告此问题）

这是我的快递header

app.use(function(req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', 'https://limeshark.dev/');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
    res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, content-type, Access-Control-Allow-Origin');
    res.setHeader('Access-Control-Allow-Credentials', true);
  next();
});

这是我的 nginx 配置

add_header 'Access-Control-Allow-Origin' 'https://limeshark.dev/';
add_header 'Access-Control-Allow-Methods' 'GET, POST';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';

当然我注意到错误中的原点 'https://limeshark.dev' 与 header 值 'https://limeshark.dev/' 不同，但我不知道为什么

提前谢谢你:)

Answer 1

按照 Nick 的建议，使用相对路径发出请求解决了问题

var t = await fetch('/t', {method: 'GET'});

Answer 2

我不能'comment'但尼克的回答解决了我的问题！

Hoodathunk 切换 URL 将摆脱可怕的 CORS 问题...

谢谢尼克！ @尼克https://whosebug.com/users/6525724/nick

CORS 阻止 javascript 同源获取请求

CORS blocking javascript fetch request with same origin

javascript

fetch

cors

fetch-api