从远程站点请求本地主机开发服务器时出现 Chrome CORS 错误

Question

星期五我有一个工作开发环境。星期一我有一个坏了。我在 Chrome 开发工具控制台中为我的所有资产遇到了此错误消息：

从源“http://example.com”访问“http://localhost:8080/build/app.css”的 CSS 样式表已被 CORS 策略阻止：请求客户端不是安全上下文，资源是在更私密的地址空间local。

有什么快速解决办法吗？我尝试在我的 webpackdevServer.headers配置中设置 access-control-allow-origin无济于事：

config.devServer.headers = {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'
}

Answer 1

只是 Chrome 客户端忽略此警告并使资产可访问的方法：

1：前往chrome://flags/#block-insecure-private-network-requests

2：设置Block insecure private network requests为禁用

注意：当您在自己的计算机或开发环境中时，这可以正常工作

Answer 2

我能够通过将一个新的服务器标头设置为预检和常规请求来允许从本地主机到本地主机的请求：

Access-Control-Allow-Private-Network: true

来源： https:
//web.dev/cors-rfc1918-feedback/#step-2 :-sending-preflight-requests-with-a-special-header

Answer 3

我终于在这个来自 Chrome 团队成员的关于 CORS-RFC1918 的 RFC 中找到了答案。总而言之，Chrome 已经实现了CORS-RFC1918，它阻止了公共网络资源请求私有网络资源——除非公共网络资源是安全的（HTTPS）并且私有网络资源提供了适当的（尚未定义的）CORS 标头.

还有一个 Chrome 标志，您可以更改以暂时禁用新行为： chrome://flags/#block-insecure-private-network-requests

禁用该标志确实意味着您正在重新打开 Chrome 的新行为旨在关闭的安全漏洞。