解决vite+vue3的跨域问题及其proxy原理

解决vite+vue3中跨域问题

代理配置

首先打开你的vite.config.js文件

修改如下配置

export default defineConfig({
    plugins: [vue()],
        server: {
           hmr:true,     //启动热更新，就是更改了代码自动刷新页面
           port: 8082,    //自定义启动时的端口
           open: true,   //代表vite项目在启动时自动打开浏览器 
           proxy:{
            "/api": { 
                   target: "http://xxx.xxx.xx.x:8080",
                //你的需要请求的服务器地址
                   changeOrigin: true, // 允许跨域
                 secure: false,  //忽略安全证书   
                   rewrite: (path) => path.replace(/^\/api/, ''), // 重写路径把路径变成空字符,
            },
        },
    },

当我需要请求的地址为http://xxx.xxx.xx.x:8080/user/login 则我们在vue里使用axios发起请求为

axios.get('/api/user/login')  //发送成功  记住不能在发请求的时候写上自己的目标请求地址，原因看下面proxy原理  也可以加上vite服务器地址

代理原理

• 众所周知，之所以会有跨域问题，是源于我们浏览器的”同源策略保护“机制，只要网络协议，域名，端口不一致都会触发，所以跨域在他们有其中一个不一样时就会产生
• 解决跨域问题有一个非常经典的方法，那就是使用node中间件进行代理，它也是今天我们proxy的原理
• 在 vite 启动的时候，创建了一个开发服务器，然后根据我们进行的开发服务器配置进行 node 中间件代理。

可以看下面这个原理图

就是根据我们的配置node中间件会转发给相应的目标地址，这样子就很好的解决了跨域问题

但是或许又有人问,为什么对node中间件发起请求没有跨域问题，那是因为不是在浏览器环境而是在node环境，所以就没有这种限制

所以我们在上面说到

在vite.config.js中配置好后，我们在发起请求是baseurl应该是配置时的关键字（上面是/api）或者是vite服务器的地址加上关键字（http://localhost:8080/api），因为我们需要向node中间件发起请求，后它根据配置代为转发，实现解决跨域这一操作