Chrome中CORS 'null'源不匹配问题求助（Firefox正常）

我之前也踩过这个一模一样的坑！Chrome在新版本里对null源（也就是直接通过file://协议打开本地文件的场景）的CORS策略收紧了不少，哪怕服务器配置了Access-Control-Allow-Origin: null也可能触发报错，而Firefox因为自身的安全策略宽松，还能正常运行。下面是具体的分析和解决办法：

问题根源 #

Chrome现在对携带凭据（你的服务器已经开启了Access-Control-Allow-Credentials: true）的null源请求限制更严格，即使服务器明确允许null源，也会因为安全策略拦截请求。另外还要检查下你的服务器配置里的Access-Control-Allow-Methods——你写的是OPTION，正确的应该是OPTIONS（复数形式），这个拼写错误可能也是Chrome报错的诱因之一（Firefox可能会容错，但Chrome不会）。

可行的解决方案 #

1. 用本地服务器托管文件（推荐，生产/开发通用） #

直接打开本地文件的file://协议本来就不是标准的开发模式，换成本地HTTP服务器就能彻底解决这个问题：

• Python用户：在文件目录下运行 python -m http.server 8080，然后通过http://localhost:8080/xxx.html访问页面
• Node.js用户：先安装http-server（npm install -g http-server），然后在目录下运行http-server -p 8080
  之后把服务器的Access-Control-Allow-Origin改成http://localhost:8080（或者你用的对应端口），这样页面源就不再是null，Chrome就能正常处理请求了。

2. 临时关闭Chrome的跨域检查（仅用于开发测试） #

如果只是临时调试，可以给Chrome加启动参数关闭安全限制，但绝对不要用这个配置浏览正常网页：

• Windows：右键Chrome快捷方式，在目标栏末尾添加 --disable-web-security --user-data-dir=C:\temp\chrome-dev（注意前面有空格）
• macOS：在终端运行 open -a "Google Chrome" --args --disable-web-security --user-data-dir=/tmp/chrome-dev
• Linux：在终端运行 google-chrome --disable-web-security --user-data-dir=/tmp/chrome-dev

3. 修正服务器的CORS配置细节 #

先把Access-Control-Allow-Methods里的OPTION改成OPTIONS，然后确认OPTIONS预请求的响应头是否正确返回。有些服务器框架对OPTIONS请求的处理需要单独配置，确保它能返回完整的CORS头信息。

内容的提问来源于stack exchange，提问作者John