关于vite proxy跨域问题的解决
作者：IICOOM
这篇文章主要介绍了关于vite proxy跨域问题的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vite proxy如何解决跨域问题
场景描述
本地起了两个服务
1.前端vue项目跑在http://localhost:5173端口
2.后端接口服务跑在http://localhost:3000端口
前端项目请求后端接口时，浏览器给出了跨域的提示，接口请求失败。
下面给出通过配置前端代理解决跨域问题方法
如果你是vite搭建的vue3项目，找到vite.config.ts，添加下面内容：
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},
}
},
})
关键的点来了，你的前端发起请求的baseUrl应该是 http://localhost:5173/api
举个例子：
前端要请求后端http://localhost:3000/userlist 接口，那么你发起的请求应该是下面的样子：
http://localhost:5173/api/userlist
这样前端就是从相同的host 并且相同的port发起的请求，代理通过前缀"/api"匹配的你要转发的请求，转发到’http://localhost:3000’真正的后端服务，并且把多余的前缀给你替换掉。
vue3 vite3 解决复杂跨域
vue3在axios发送post请求时，容易遇到复杂跨域，会先发送options的预请求，再发送post请求，options请求搞了很久，无法被后端识别通过，只能想办法用proxy代理解决
vite.config.js中添加一下代码
export default defineConfig({
plugins: [
vue(),
],
server: {
host: '10.10.159.234',//本机ip
port: 8080,
//open: false, //自动打开
//base: "./ ", //生产环境路径
proxy: {
'/api': {
target: 'http://10.56.33.13', //实际请求地址
changeOrigin: true,
//rewrite: (path) => path.replace(/^\/api/, '')根据自己api情况选择这条
},
}
}
});
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。