解决浏览器 CORS 报错：Access to Script Blocked by CORS Policy

问题背景

在前端开发中，尤其是本地开发时，我们常常直接通过双击 HTML 文件的方式使用浏览器打开网页，路径通常是 file:// 开头的 URL。例如：

file:///D:/web_study/20241217/index.html

在这种情况下，如果你尝试加载 JavaScript 文件，会遇到以下报错：

报错信息

Access to script at 'file:///D:/web_study/20241217/index.js' from origin 'null' has been blocked by CORS policy: 
Cross origin requests are only supported for protocol schemes: chrome, chrome-extension, chrome-untrusted, data, http, https, isolated-app.

GET file:///D:/web_study/20241217/index.js net::ERR_FAILED

报错解析

CORS 限制：浏览器出于安全考虑，默认启用了同源策略（CORS）。当使用 file:// 协议时，浏览器无法确定源 (origin)，因此请求被阻止。
ERR_FAILED：网络请求失败，是因为 CORS 策略拒绝加载 JavaScript 文件。

报错原因

现代浏览器的安全机制 CORS（跨域资源共享） 仅支持以下协议：

http / https
data
chrome-extension
等等

file:// 协议不在允许列表内，因此直接打开 HTML 文件并加载 JavaScript 时会触发错误。

解决方案

方法一：使用本地 HTTP 服务器（推荐）

最根本的解决方法是通过本地 HTTP 服务器运行项目，而不是直接打开 file:// 链接。

1. 使用 VSCode 的 Live Server 插件

安装 Live Server 插件：
- 打开 VSCode，进入插件市场，搜索 "Live Server" 并安装。
启动 Live Server：
- 在项目目录下右键点击 index.html 文件，选择 "Open with Live Server"。
浏览器自动打开页面，访问地址：
```
http://localhost:5500
```

2. 使用 Python 内置 HTTP 服务器

Python 自带一个简单的 HTTP 服务器，可以在本地快速启动：

打开命令行终端，进入 HTML 文件所在目录：
```
cd D:/web_study/20241217
```
运行以下命令（Python 3.x）：
```
python -m http.server 8000
```
在浏览器中访问：
```
http://localhost:8000/index.html
```

3. 使用 Node.js 的 http-server 工具

如果你安装了 Node.js，可以使用 http-server 包：

安装 http-server：
```
npm install -g http-server
```
启动服务器：
```
http-server
```
浏览器访问：
```
http://localhost:8080
```

方法二：调整 Chrome 浏览器启动参数（临时解决，不推荐）

这种方法临时禁用浏览器的安全策略，仅适用于测试环境。不要在生产环境使用！

在 Chrome 浏览器启动时添加以下参数：

chrome.exe --allow-file-access-from-files --disable-web-security

然后重新打开 HTML 文件。

⚠️ 警告：此方法存在安全风险，绕过了浏览器的安全机制，仅用于临时测试。

总结

出现 "Access to script at ... has been blocked by CORS policy" 的错误，通常是因为浏览器默认禁止了通过 file:// 协议加载外部资源。解决这个问题最好的方法是使用本地 HTTP 服务器运行项目，比如：

VSCode 的 Live Server 插件
Python 内置服务器
Node.js 的 http-server 工具

通过这些工具，你可以在本地以 http:// 协议访问文件，解决 CORS 报错问题，提升开发效率。

Hekyのblog