我没有设置 CORS 标头，即使它已设置。为啥？

Posted 2023-03-04

【中文标题】我没有设置 CORS 标头，即使它已设置。为啥？

【英文标题】：I am getting no CORS header set, even though it is set. Why?我没有设置 CORS 标头，即使它已设置。为什么？

【发布时间】：2020-02-14 21:25:53

【问题描述】：

我在尝试下载图像时遇到了这个 CORS 错误（但我在任何 URL 上都遇到了同样的错误）：

Access to XMLHttpRequest at 'https://s.iha.com/00144228146/Paimpol-Lighthouse-of-the-peacock-on-the-island-of-brehat-near-paimpol.jpeg' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我正在使用 Parcel Bundler 运行 ExpressJS 服务器：

const app = express();


app.use(cors());


app.use(bodyParser.urlencoded(
    extended: false
));
app.use(bodyParser.json());
app.use(morgan('dev'));

const http = require('http').Server(app);

http.listen(port);

app.use(bundler.middleware());

正如您在上面看到的，我已经尝试过 Express 的 cors() 插件，并且我已经尝试自己手动设置标题：

    app.use((req, res, next) => 
            res.setHeader('Access-Control-Allow-Origin', '*');
            res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
            res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
            res.setHeader('Access-Control-Allow-Credentials', true);

            next();

但是，无论我尝试过什么。我仍然得到同样的No 'Access-Control-Allow-Origin' header is present on the requested resource 错误。

在 Chrome 中我可以看到这些标题集：

有些东西不匹配，我还没弄清楚是什么。任何帮助将不胜感激！

【问题讨论】：

不，这只是一些随机图片，我正在尝试拉取测试

当我查看来自s.iha.com/00144228146/… 的响应的标头时，响应中根本没有访问控制标头。这可能不是来自您的 localhost:3000 服务器，而是来自其他一些实际从中获取图像的s.iha.com 服务器。因此，您尝试更改 localhost:3000 服务器上的标头根本不会影响 s.iha.com 上的其他服务器。

@jfriend00 我明白了。我想我很困惑。如果我可以简单地使用 Allow CORS Chrome 扩展程序并绕过他们服务器的 CORS 设置，我不明白 CORS 的意义，所以我认为这是我的服务器正在设置的东西。

CORS 仅适用于默认浏览器配置。它会阻止您设计一个依赖直接 CORS 访问其他人的网站的网站，该网站可以在每个人的浏览器中开箱即用。单个用户有很多方法可以绕过 CORS，因为它只在浏览器中实现。任何外部脚本都可以绕过它。它可以防止其他人设计从标准浏览器配置直接访问您的站点的站点。这就是它所阻止的一切。他们的服务器可以代理您的站点并绕过 COR。所以，它确实做了一些有用的事情，但有很多方法可以绕过它。

【参考方案1】：

您收到的错误不是来自您的服务器：http://localhost:3000，而是来自：https://s.iha.com/。

不要发出 AJAX 请求，只需使用 <img> 标签提供图像。

您可以从您的服务器下载以避免 CORS 问题，或者直接访问启用了 CORS 的服务器。

【讨论】：

我实际上是在尝试从 Firebase 的存储中提取照片，我应该指定它，但我需要能够从浏览器而不是我的服务器中提取照片。所以你是说这会是 Firebase 的问题？

如果它来自 firebase，您可能还有其他获取图像的方法。但是，是的，您不能从浏览器绕过 CORS。服务器要么允许 CORS，要么不允许。如果只是图片，可以使用img标签代替XMLHttpRequest。

好的，作为一种解决方法，我一直在使用 Chrome 扩展程序Allow CORS: Access-Control-Allow-Origin，它让我可以通过 XMLHttpRequest 访问图像。但我不能（或不应该）通过 JS 做到这一点？

该扩展程序将适用于您，仅适用于您或任何使用该扩展程序的人。您不能对不允许 CORS 的服务器执行 AJAX 请求。解决方法是使用您的服务器作为代理。因为服务器到服务器没有 CORS 限制。