CORS 阻止具有相同来源的 javascript 获取请求答案

【问题标题】：CORS blocking javascript fetch request with same originCORS 阻止具有相同来源的 javascript 获取请求
【发布时间】：2021-08-22 21:27:35
【问题描述】：

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

你可以在这里试试：https://limeshark.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/”不同，但我不知道为什么

提前谢谢你:)

【问题讨论】：

看起来你要跨域，因为它有和没有www 子域。防止这种风险的一个好方法是不使用绝对路径。例如，您的获取请求可能只是 fetch('/t/', {method: 'GET'});。值得一试：stackoverflow.com/questions/9370787/…
我很确定 origin 后面有 no /。顺便说一句，如果请求的来源与 URL 的来源相匹配，为什么还需要 CORS？这样的响应不需要任何Access-Control-* 标头。

标签： javascript cors fetch fetch-api

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

请不要添加“谢谢”作为答案。相反，请投票给您认为有帮助的答案。 - From Review