编译后的Vite React应用为何抛出CORS错误？

问题现象 #

• 本地直接打开构建生成的index.html文件时，触发CORS错误：

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

• 部署到线上网站后无法正常运行，但通过http-server启动构建产物目录时一切正常。

相关代码与配置 #

组件资源导入代码 #

// App.jsx
import Header from './Header/Header'
// /Header/Header.jsx
import logo from '../assets/examole-logo.png'
import './Header.css'

当前Vite配置 #

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
})

错误原因 #

1. file://协议的限制：浏览器同源策略禁止通过file://协议加载跨协议资源，必须通过HTTP/HTTPS协议访问构建产物，这也是http-server能正常运行的核心原因。
2. 线上部署的路径问题：Vite默认base配置为根路径/，如果应用部署在域名子路径下（比如https://xxx.com/my-app/），未修改base会导致资源路径错误，进而触发加载失败或CORS相关问题。
3. 手动指定图片路径的错误：直接在img标签写./src/assets/example-logo.png完全错误，构建后src目录不会被打包到产物中，只有通过import引入的资源才会被Vite处理并复制到dist目录，手动路径会导致资源缺失。

解决方案 #

1. 本地正确预览构建产物 #

不要直接双击打开index.html，用以下两种方式：

• 用Vite自带的预览命令：vite preview，执行后会启动HTTP服务器加载dist目录内容。
• 全局安装http-server后执行：http-server dist（安装命令：npm install -g http-server）。

2. 适配线上部署的路径配置 #

如果应用部署在根域名下，直接构建即可；如果部署在子路径，修改Vite配置的base字段：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: '/your-subpath/' // 替换为实际子路径，比如GitHub Pages仓库路径为 '/username/repo-name/'
})

修改后重新执行vite build，部署生成的dist目录即可。

3. 保持正确的资源导入方式 #

你原本的import资源方式是正确的，Vite会自动处理资源打包和路径生成：

// Header.jsx中正确导入图片
import logo from '../assets/examole-logo.png'

// 组件内使用
<img src={logo} alt="示例Logo" />

这样构建后图片会被自动复制到dist/assets，并生成正确的引用路径，无需手动修改。

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