Vite构建VUE+Axios解决跨域by CORS policy: No ‘Access-Control-Allow-Origin’ header问题

本来想要使用Axios插件get测试一下，谁曾向出了这茬子事，花了近一个小时去解决这个跨域问题，这是什么事啊！

在网上寻这看那的，就是没找到一篇关于基于Vite构建VUE去解决跨域的解决方案，全部都是VueCLI下的解决方案。说好的官方脚手架为啥国内用的人这么少？我看更新速度也不赖呀，难道大家都不用VUE了吗？

先附上VueCLI下的解决方案（万一有人需要呢）：

在vue.config文件里面配置，如下代码 （如果没有 vue.config文件就新建一个）

//在vue中使用proxy进行跨域的原理是：
//将域名发送给本地的服务器（启动vue项目的服务,loclahost:8080），
//再由本地的服务器去请求真正的服务器。

module.exports = defineConfig(
   devServer: {
    open: true,
    proxy: {
 
        "/api": {//表示拦截以/api开头的请求路径
        target: "要访问的目标地址",
        ws: true,
        changOrigin: true,//是否开启跨域
        pathRewrite: {
          "^/api": ""  //重写api，把api变成空字符，因为我们真正请求的路径是没有api的
        }
 
      }
    }
  }
})

当我试遍了各种七七八八的解决方案却还是没法得以解决之后，我意识到是否是因为构建工具不同，导致配置格式不同。但我也并没有看到哪篇文章提到它是使用哪种构建工具。带着郁闷的头绪，我打开了vite官方文档，幸运的是在那里找到了我的答案。

好的，不说废话了。最后附上Vite构建下设置允许跨域的解决方案

同样在vue项目根目录下找到vue.config.js文件。在export default defineConfig下添加server属性

export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server:{
    proxy:{
      '/api':{//表示拦截以/api开头的请求路径
        target:'https://www.playcreator.cn',
        changeOrigin: true,//是否开启跨域
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

参考文档：开发服务器选项 | Vite 官方中文文档 (vitejs.dev)

1、为什么要重写api变为空字符？

因为如果像我们那样配置好后，我们请求的实际路径会带上api，但我们发起请求的时候是不需要api的，所以要把他变成空字符。

2、在vue中使用proxy进行跨域的原理是：

将域名发送给本地的服务器，再由本地的服务器去请求真正的服务器。