React项目npm run build后遭遇CORS政策拦截错误求助

问题根源 #

直接通过file://协议打开build后的index.html文件时，浏览器的CORS安全策略会阻止本地文件协议下的资源请求，导致React的动态渲染资源无法加载，因此仅能看到静态导航栏，主内容缺失。而npm start是通过HTTP协议的本地开发服务器运行，不存在这个限制。

修复方法 #

方法1：使用serve工具启动静态服务器（推荐）

• 全局安装serve工具：

  npm install -g serve
  

• 进入项目的build目录：

  cd build
  

• 启动静态服务器：

  serve -s .
  

• 在浏览器中访问控制台输出的HTTP地址（通常是http://localhost:3000），即可看到与npm start一致的页面效果。

方法2：利用Python内置HTTP服务器（已安装Python时可用）

• 进入项目的build目录：

  cd build
  

• 根据Python版本启动服务器：
  • Python 3：

    python -m http.server 3000
    

  • Python 2：

    python -m SimpleHTTPServer 3000
    

• 访问http://localhost:3000即可正常查看页面。

方法3：使用VS Code Live Server插件

• 在VS Code中打开项目的build文件夹
• 右键点击index.html文件，选择「Open with Live Server」
• 插件会自动启动HTTP服务器并在浏览器中打开页面，无需手动输入地址。

注意事项 #

永远不要直接双击打开build目录下的index.html文件，必须通过HTTP协议的服务器访问静态资源，才能避免CORS相关错误。

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