uniapp在解决谷歌浏览器跨域问题,在谷歌浏览器运行

最近在写一个uniapp项目 但是app无法在谷歌浏览器上运行 运行就报错
后来看了报错信息,是跨域问题,
跨域图片
于是就使用了官方推荐的HBuilderX的内置浏览器,说实话用久了还觉得蛮方便的,主要是我是单屏幕,总是来回切换会十分的不方便,但是我还是十分的想要解决这个跨域问题,好啦,废话不多说,上代码~~~

  1. 在manifest.json的源码视图里,使用代理服务器的方式
"h5" : {
        "router" : {
            "mode" : "hash"
        },
        "devServer" : {
            "https" : false,
            // "port": 8000, //端口号
            // "disableHostCheck": true,
            "proxy" : {
                "/api" : {
                    "target" : "http://www.XXX.XXXX.XXXXX666.com", //这里是你的目标接口域名
                    "changeOrigin" : true, //是否跨域
                    "secure" : false, // 设置支持https协议的代理
                    "pathRewrite" : {
                        "^/api" : "/"
                    }
                },
                "/formalAPI" : {
                    "target" : "http://www.XXXXX.com/",
                    "changeOrigin" : true, //是否跨域
                    "secure" : false, // 设置支持https协议的代理
                    "pathRewrite" : {
                        "^/formalAPI" : "/"
                    }
                }
            }
        }
    }

2.上面我写了两个代理 是因为我有一个测试环境和一个正式环境 我懒得每回改所以就写了两个API代理
因为是封装的requeset请求 所以需要在封装的请求里面写上我们代理的域名
Https.js页面

const process= 'development';
var baseURL = '/api';
if(process === 'development'){
    console.log('开发环境/测试环境')
    // baseURL = '/api';
}else{
    console.log('生产环境/正式环境')
	baseURL = '/formalAPI';
}

3.同理如果你在main.js页面设置了全局的baseURL也是一样的

Vue.prototype.baseUrl = '/api';

4.设置完以后要重启整个项目 然后运行到谷歌浏览器啦 跨域问题就解决啦
最后上一张图吧
接口成功调用
对了最后再说一下需要注意的地方:
注意:当我使用代理服务器在谷歌浏览器上运行的时候,再使用真机调试,就会报错,无法识别/api,所以最后还是使用了内置的浏览器。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值