Angular 15双击dist目录index.html触发CORS错误如何解决？

方法一：用本地HTTP服务器访问（推荐） #

直接通过file://协议打开静态文件会被浏览器的CORS策略限制，最稳妥的方式是用本地HTTP服务器托管构建后的文件：

1. 全局安装轻量HTTP服务器（以http-server为例）：

   npm install -g http-server
   

2. 进入构建后的项目子目录（比如dist/ang-v15）：

   cd dist/ang-v15
   

3. 启动服务器并自动打开浏览器：

   http-server -o
   

此时会通过http://localhost:8080（默认端口）访问项目，完全规避CORS限制。

方法二：修改Angular构建配置，使用相对路径 #

调整项目构建规则，让打包后的文件支持相对路径加载：

1. 打开项目根目录的angular.json，找到对应项目的architect -> build -> options节点，添加或修改baseHref配置：

   "options": {
     "baseHref": "./",
     // 保留其他原有配置
   }
   

2. 重新构建项目：

   ng build --prod
   

构建完成后，仍建议搭配本地HTTP服务器访问（直接双击打开可能仍存在部分资源加载异常）。

方法三：临时放宽浏览器安全限制（仅本地测试用） #

如果只是临时本地调试，可以修改浏览器启动参数绕过CORS限制，但严禁用于生产环境或日常网页浏览：

• Chrome浏览器：右键点击Chrome快捷方式→「属性」，在「目标」栏末尾添加以下参数（注意参数前加空格）：

  --allow-file-access-from-files --disable-web-security
  

  重启Chrome后，再双击index.html即可正常打开。

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