共计 632 个字符,预计需要花费 2 分钟才能阅读完成。
场景形容:本地起了两个服务
- 前端 vue 我的项目跑在 http://localhost:5173 端口
- 后端接口服务跑在 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’ 真正的后端服务,并且把多余的前缀给你替换掉。
对于这个问题,网络上充斥着大量的错误方法,一不小心就会被误导。如果本文帮到了你,就帮忙点个赞吧,有助于让更多的人看到。
正文完