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

红太狼 2021-08-27 16:55 1648阅读 0赞

最近在写一个uniapp项目 但是app无法在谷歌浏览器上运行 运行就报错  
后来看了报错信息，是跨域问题，  
![跨域图片][20200403145755856.png]  
于是就使用了官方推荐的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.设置完以后要重启整个项目 然后运行到谷歌浏览器啦 跨域问题就解决啦  
最后上一张图吧  
![接口成功调用][20200403162410738.png]  
对了最后再说一下需要注意的地方：  
**注意：当我使用代理服务器在谷歌浏览器上运行的时候，再使用真机调试，就会报错，无法识别/api，所以最后还是使用了内置的浏览器。**

[20200403145755856.png]: /images/20210813/bdccd9a29128432a901a043c194edfdc.png
[20200403162410738.png]: /images/20210813/9ddd8c2c66704ea997e7222c1d4d9526.png