前端 vite 配置代理服务器 解决跨域问题

工作中我们需要请求其他后端提供的接口，那么此时就有了跨域问题

首先我们要了解到为什么会引起跨域， 协议+域名+端口号 有一项不同，就会被浏览器认定为跨域。

解决跨域有很多的方法 这次我主要来说一下 配置本地开发服务器，

配置本地开发服务器主要理念就是 服务器和服务器不存在跨域的，浏览器和服务器才存在跨域问题，配置本地开发服务器用来做代发。

上代码

本地地址 http://localhost:3000 

要请求的地址   `http://api.test.uat/cas-server/createByUsernamePassword?username=${params.username}&password=${params.password}`

// vite.config.ts
 server: { //同plugins同级
    port: 3000, //本地端口号
    proxy: { //配置代理服务器
      "/api": {
        target: "http://api.test.uat",    //目标url
        changeOrigin: true,    //允许跨域
        rewrite: (path) => path.replace(/^/api/, ""),     //重写路径,替换/api
      },
    },
  },

这么配置以后 我们的axios的baseURL = '/api' 那么此时当我们请求到 /api的时候 本地服务器会向目标服务器代发一个请求，那么此时我们会发现跨域问题就被解决了。