场景形容:本地起了两个服务

  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'真正的后端服务,并且把多余的前缀给你替换掉。

对于这个问题,网络上充斥着大量的错误方法,一不小心就会被误导。如果本文帮到了你,就帮忙点个赞吧,有助于让更多的人看到。