本篇文章主要说明在vite中如何解决跨域问题，相信你看完这篇文章会有更深的理解。

产生原因

  当你看到下图这个爆红的时候，就说明你遇到了跨域问题，如下图：

  相信有很多人刚开始跟我一样担心跨域会很复杂，咱们不妨先看看跨域产生的原因。跨域问题是由浏览器的同源策略引起的，当你发送请求的源（协议，域名，端口号）跟目标服务器的源存在差异时就会产生跨域问题。

  看完原因咱们就知道了是源的差异导致了跨域问题，那消除差异不就能解决跨域问题，下面咱们来消除源的差异。

解决办法

  在使用vite创建项目的时候会产生一个vite.config.js配置文件，在vite.config.js的defineConfig中添加代理，添加如下代码：

  server: {
    proxy: {
      '^/api': {
        target: '协议地址端口', //目标源，目标服务器，真实请求地址
        changeOrigin: true, //支持跨域
        rewrite: (path) => path.replace(/^\/api/, "/api"), //重写真实路径,替换/api
      }
    }
  }

  其中 '^/api' 的作用是，当读取到本地请求路径（可以理解为通过axios发送请求时的baseURL）中的 /api 时 ，将其转化为target中的目标源，changeOrigin:true 表示支持跨域，rewrite是根据真实路径重写处理之后的，api路径，如果真实请求路径的目标源后面有api，咱们也添加上api，如果有其他东西，同理进行添加，确保代理之后的请求地址与真实请求地址一致，这样问题就得到解决了。

个人思考

  有个伏笔就是跨域问题是由于浏览器的同源策略导致，那么服务器与服务器之间就不受这个影响，咱们不使用代理之前，请求到底发送出去了吗。实际是发送出去了，并且服务器将结果返回到浏览器了，但是咱们的请求不同源，浏览器就不把结果给我们，通过代理来告诉浏览器同源了，浏览器才把数据给咱们，所以必须保证真实请求路径是准确的，这样才能拿到想要的数据。

  打个比方吧，你对班主任讲语文老师想要期中考试的成绩单，班主任打印完成绩单了，现在班主任手里有成绩单了，但不能给你呀，等你再对班主任讲你是语文课代表的时候，班主任把成绩单给你了，当然无论你是不是真的语文课代表，你都通过语文老师赋予课代表这个身份拿到了成绩单。