2021.09.18-前端-uni-app跨域解决方案

一、官方推荐。

cors和插件安装解决跨域

二、配置uni-app 中 manifest.json->源码视图。

manifest.json

"h5" : {
        "devServer" : {
            "port" : 8080,    //本地前端运行端口号
            "disableHostCheck" : true,
            "proxy" : {
                "/api" : {    //相当于把目标域名赋值给/api
                    "target" : "http://www.baidu.com:81",    //目标接口域名,81表示为端口。
                    "changeOrigin" : true,    //是否跨域
                    "secure" : false,    //设置支持https协议的代理
					"pathRewrite":{"^/api":""}    //有时候不加会不生效得加，填上被赋值的/api。
                }
            }
        }
    }

http请求接口数据

uni.request({
    url: '/api/getinfo',     //这里的api相当于我们填写的域名，也可以:'/api' + '网址动态尾缀'
    success: (res) => {
        console.log(res.data);
    }
});

这样请求的接口地址就变为：http://127.X.X.X:8080/api/getinfo

实际这样请求webpack会解析为请求：http://www.baidu.com:81/getinfo

（   科普拓展：当 /api 或者项目其他的 url 前面没有加 http:// ，则请求的链接会自动在前面加上本地IP，而这里正是想要使用本地IP这种效果。如果其他时候你访问的接口前面突然多了本地IP，如：http://127.X.X.X:8080/www.baidu.com:81/getinfo，那就是你没给接口前面的域名加 http:// ）

如图1-1，1-2，是当封装了request，传入的 url 和引用的 url 的示例。

(图1-1)

 (图1-2)

总结：总之如果想要跨域成功，设置了/api之后，所有的url，都要改成 '/api+尾缀' 或者 '/api' + '尾缀' 的形式。或者如：

const rootPath = "/api/";

uni.request({
	url: rootPath + url,    //此处的url形参是接口的尾缀。
})

最后切记：配置完之后manifest.json文件之后，一定要重启项目，重启，重新运行，重跑，否则能弄到头发掉都看不到效果。