场景形容:本地起了两个服务
- 前端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'真正的后端服务,并且把多余的前缀给你替换掉。
对于这个问题,网络上充斥着大量的错误方法,一不小心就会被误导。如果本文帮到了你,就帮忙点个赞吧,有助于让更多的人看到。