关于vite的跨域问题
报错
Access to XMLHttpRequest at '<http://localhost:3000/player>' from origin '<http://localhost:4000/>' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
解决
vue需要配置自定义代理规则进行跨域访问
配置跨域
官方文档:https://cn.vitejs.dev/config/server-options.html#server-proxy
在vite.config.ts修改:
//vite.config.ts
export default defineConfig({
//......
server: {
//......
port: 4000, //vite的默认端口(别和后端冲突了)
proxy: {
"/api": { //代理的请求
target: "http://localhost:8000", //后端的地址
changeOrigin: true, //开启跨域访问
rewrite: (path) => path.replace(/^\/api/,''), //重写前缀(如果后端本身就有api这个通用前缀,那么就不用重写)
},
},
},
})
发起请求的地方:
axios.defaults.baseURL ='/api'; //配置前缀
axios.get('info') //这里会发送到http://localhost:4000/info
生产环境配置跨域
生产环境配置跨域,还需要编辑nginx的配置文件,在server
对象中再添加一个location
对象(别忘了上一个对象末尾的分号;
)
server {
//......
location /api/ {
proxy_pass http://localhost:8000/; //后端的地址
}
}
本文作者:korin5
本文链接:https://www.cnblogs.com/korin5/p/17931093.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步