vite 打包from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes:
时间: 2025-01-16 21:22:06 浏览: 82
### Vite 打包后跨域请求被 CORS 策略阻止的解决方案
#### 配置开发环境中的代理服务器
为了防止浏览器在开发环境中发出带有 `origin 'null'` 的请求,可以利用 Vite 提供的内置代理功能来处理跨源资源共享 (CORS) 请求。通过修改项目根目录下的 `vite.config.js` 文件,在其中定义一个代理规则:
```javascript
import { defineConfig } from 'vite'
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'http://localhost:3000', // 后端服务的实际地址
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '')
}
}
}
})
```
此配置会将所有以 `/api` 开始的 URL 路径转发到指定的目标服务器上,并替换路径前缀[^4]。
#### 修改生产环境下 API 基础URL
对于已经打包部署的应用程序来说,直接更改前端代码中调用接口的基础 URL 是一种简单有效的方法。假设后端提供了一个 HTTPS 接口,则可以在构建之前调整 axios 实例的基础 URL 设置如下所示:
```javascript
// src/main.js 或者其他初始化入口文件内
const instance = Axios.create({
baseURL: process.env.NODE_ENV === "production"
? "https://your-production-backend-domain.com/api/"
: "/api",
});
```
这里使用了 Node.js 中常见的环境变量区分不同运行模式下所使用的API基础链接[^2]。
#### 在后端设置响应头
如果拥有对后端服务器控制权的话,最彻底的办法还是让其返回合适的 HTTP 头信息给客户端。例如 Spring Boot 应用可以通过全局拦截器的方式实现这一点;而对于 Express.js 来说只需要安装并启用 cors npm 包即可完成相同的操作。具体做法是在每次HTTP回应里加入如下头部字段之一或全部:
- `Access-Control-Allow-Origin`: 表明允许哪些站点访问资源;
- `Access-Control-Allow-Methods`: 列举支持的方法类型(GET/POST...);
- `Access-Control-Allow-Headers`: 客户端可携带额外参数列表.
以上措施能够有效地规避由于同源策略造成的限制问题。
#### 使用相对路径而非绝对路径加载静态资源
有时开发者可能会不小心把图片或其他媒体素材硬编码成完整的网络位置形式,这同样会造成不必要的跨站请求。因此建议尽可能采用相对于当前页面的位置描述方式引用这些资产[^5]。
阅读全文
相关推荐



















