uniapp vue3下的代理转发不生效问题,亲测有效解决

时间:2022-12-15 11:10:57

以前配置过vue vite 的代理转发,没想到在uniapp的代理转发下翻车了,其实是一个很小的问题。调试过程中,尝试了webpack、vite 等写法 在根目录下 创建了 vite.config.js vue.config.js 都不生效。

最后解决的方法是 Vue3 proxy 的规则,重写规则必须要放在跳转域名前,下面贴配置源码

请求端代码:

methods:{
             getList(){
                uni.request({
                    method:"POST",
                    header:{
                        "Content-Type":"application/x-www-form-urlencoded"
                    },
                    url:"/api.php/school/Slide/index",
                    data:{id:9},
                    success:(res) => {
                        console.log(res)
                    },
                    fail:(err) => {
                        console.log(err)
                    }
                });
            }
        }
View Code

配置代理代码:

"devServer" : {
            "proxy" : {
                //配置代理服务器来解决跨域问题,uniapp不适用CORS方案和设置JSONP方案
                "" : {
                    //重写规则,调试不写规则,就会默认进入映射域名,调试一定要先让它代理生效
                    "pathRewrite": {
                        "^" : ""
                    },
                    //映射域名
                    "target":"http://school.bjzjxf.com",
                    //是否跨域
                    "changeOrigin":true
                }
            },
            "https" : false,
            "port" : 3000
        },

uniapp vue3下的代理转发不生效问题,亲测有效解决

 

 

百度看大部分声明 vue2不存在这个问题。

接下来说下为什么会有跨域这个问题吧,很多人可能并不太理解。

首先前端 vue 是内置了node.js 映射了一个独立的运行环境,我本地的端口是3000,本地服务器默认IP是 127.0.0.1,调试页面的时候访问是 127.0.0.1:3000 这个域名。

那么跨域请求的API 接口,一般是放在云端服务器,例如:https://school.bjzjxf.com/api/api.php

触发跨域的条件是:

  1. 域名不同
  2. 端口不同
  3. 协议不同

对比就发现本地的域名和API的域名以上3点均不同,所以肯定会触发跨域(只要有一项不同都会触发跨域) 

uniapp vue3下的代理转发不生效问题,亲测有效解决
Referrer Policy:strict-origin-when-cross-origin  // 这个标识就是提示已经跨域请求了
然后为什么使用代理可以解决跨域问题,因为阻止跨域是浏览器的安全协议,防止API接口不合法调用的导致的安全问题。
使用代理就跳过了浏览器检测这块可以这么理解,相当于 静态的html Ajax请求第三方API也不会提示跨域,但是把这个html放到不同的服务器环境下去请求会提示跨域。
所以以下是别人说的话,然后理解我上面说的话。就会发现 只要有2个独立环境下,互相请求对方的接口都不合法,属于跨域。