允许本地主机上的 cors

Posted 2023-03-03

【中文标题】允许本地主机上的 cors

【英文标题】：Allow cors on localhost

【发布时间】：2020-04-30 16:30:23

【问题描述】：

我知道已经有人回答了，但我不明白如何解决我的问题。我正在使用 webpack 4 开发一个静态网站，但在尝试（本地和从我的在线服务器）加载图像时遇到问题。

如何解决使用 webpack 时出现的Access to XMLHttpRequest at 'XXX' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource 错误？我没有使用 express（仍在学习 webpack），我找到的所有答案对我来说都相当复杂，并且使用了自定义服务器，我没有..

有没有简单的方法绕过这个？

顺便说一句，我正在使用<img src="XXX" alt="" crossorigin="anonymous"> 处理我的图像。有时有效，有时无效..我发现的文章目前对我来说太技术性了..

我尝试将以下内容添加到我的webpack.config.dev.js 文件中，但它也不起作用：

devServer: 
    headers: 
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
      'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
    ,
(...)

【问题讨论】：

我认为没有简单的方法可以解决这个问题。请参阅下面的答案如何在 Chrome 中禁用 CORS 和许多其他功能（您可以从不同的配置文件中执行此操作）。我发现从长远来看，使用 CORS 中间件从非常简单的 Experss 服务器上提供服务更简单。

【参考方案1】：

我认为您从在线服务器加载的图像会导致 CORS 警告，而您的 webpack conf 与它无关。

如果您使用的是 Chrome，则可以使用 this 之类的扩展程序绕过 CORS 或使用 Chrome 的 --disable-web-security 参数解释为 here

【讨论】：

扩展是完美的！我尝试了其他不起作用的方法，但是这个效果很好。谢谢！

我无法准确理解根本问题。您是否想尝试添加 'Access-Control-Allow-Origin': '*' 或 'Access-Control-Allow-Origin': ' localhost:3000'，在你的在线 http 服务器响应？

【参考方案2】：

您可以尝试使用 JSONP，但它有点像 hack，而且每个 API 都不允许使用它