CORS 阻止同源 javascript 获取请求

Question

我制作了一个 JavaScript 应用程序，可以在页面加载时获取 JSON 文件。对于我和大多数用户来说，一切都运行良好。但对于某些人来说，获取请求会被 CORS 阻止，因为“Access-Control-Allow-Origin”标头的值不等于提供的来源。

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

我的

fetch

要求：

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

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

这是我的 Express 标题

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”与标头值“https://limeshark.dev/”不同，但我不知道为什么

提前谢谢你:)

Answer 1

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

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

Answer 2

我无法“发表评论”，但尼克的回答解决了我的问题！

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

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