允许本地主机跨域资源共享（CORS）

Question

我知道这个问题已经有答案了，但我不明白如何解决我的问题。我正在使用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',
    },
(...)
}

- Perdixo

---

我认为没有简单的方法可以解决这个问题。请参见下面的答案，了解如何在Chrome中禁用CORS以及其他许多事情（好在您可以从不同的配置文件中进行操作）。我发现使用CORS中间件从一个非常简单的Experss服务器提供服务在长期运行中更加简单。 - 9000

Answer 1

我认为你从在线服务器加载的图像导致了CORS警告，与此无关的是你的Webpack配置。

如果你正在使用Chrome浏览器，你可以使用像这个插件绕过CORS限制， 或者使用Chrome的--disable-web-security参数，具体请参考此处。

- Tamer Aktaş

---

这个扩展非常完美！我尝试过其他的，但是它们都不起作用，而这个却非常好用。谢谢！ - Perdixo

我无法确切地理解底层问题。您可能想尝试在您的在线HTTP服务器响应中添加“Access-Control-Allow-Origin：'*'”或“Access-Control-Allow-Origin：'localhost:3000'”。 - Tamer Aktaş

Answer 2

你可以尝试使用JSONP，但这有点像黑客技巧，并不是每个API都允许。

- alissongranemann

Answer 3

这种方法需要使用Google Chrome浏览器。关闭所有Google Chrome窗口，在终端中的任何目录下执行以下命令：

WINDOWS系统：Start-Process -FilePath "chrome.exe" -ArgumentList "--user-data-dir=$env:TEMP\chrome-XXXXXXXX"

MAC系统：open -a "Google Chrome" --args --user-data-dir=$(mktemp -d -t 'chrome-XXXXXXXX') --disable-web-security

在新打开的Google Chrome窗口中，搜索http://localhost:8080。（默认端口号为8080，但如果有多个端口开放，请使用webpack在终端中打印的端口号）

测试完成后，退出Google Chrome以恢复正常的安全设置。

- Expo Managed