关于vite proxy跨域问题的解决
更新时间：2024年03月12日 09:50:53 作者：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情况选择这条
},
}
}
});
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue-test-utils初使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要给大家介绍了关于vuex的数据渲染与修改的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
这篇文章主要介绍了如何给element添加一个抽屉组件的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
这篇文章主要介绍了Vue绘制双Y轴折线柱状图实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要介绍了详解vue中v-on事件监听指令的基本用法，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
现在,很多登陆表单都会使用密码加密,为登录安全,登录表单输入密码,会加密后传入后台,本文就来介绍一下Vue3实现密码加密登录的示例代码,具有一定的参考价值,感兴趣的可以了解一下2024-02-02
Vue突然报错doesn‘t work properly without JavaScript enabled
最近在做项目的时候遇到了些问题,所以这篇文章主要给大家介绍了关于Vue突然报错doesn‘t work properly without JavaScript enabled的解决方法,需要的朋友可以参考下2023-01-01
Vue keepAlive实现不同的路由共用一个组件component的缓存问题(推荐)
这篇文章主要介绍了Vue keepAlive实现不同的路由共用一个组件component的缓存问题,实现方式使用Vue keepAlive实现页面缓存，需要的朋友可以参考下2022-08-08
这篇文章主要介绍了详解Vue.js和layui日期控件冲突问题解决办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
这篇文章主要介绍了Vue项目引用百度地图并实现搜索定位等功能(案例分析),本篇文章为案例分析，技术点较多，所以篇幅较长，认真阅览的你一定会学到很多知识，需要的朋友可以参考下2022-09-09
最新评论