Uniapp中h5跨域解决

• H5为啥会存在跨域问题

• 小程序一切都正常的请求调用

• App一切都正常的请求调用

此跨域问题只存在于浏览器端，App和小程序不存在跨域问题

出现如下报错

 参考地址：

manifest.json官方配置文档： uni-app官网

Chrome 调试跨域问题解决方案之插件篇： uni-app H5跨域问题解决方案（CORS、Cross-Origin） - DCloud问答

其实uni-app官方有解决跨域的办法，官方推荐使用HBuilderX中内置的浏览器去预览，在内置的浏览器中不会存在跨域问题，但是要是在Chrome 浏览器中预览的话就会出现这个跨域问题，官方推荐使用Allow-Control-Allow-Origin: *插件的方式去解决，但是我试过这个插件，不知道是什么问题，并没有效果，跨域问题依旧还是存在，后面再仔细的看了下文档，看到了下面的提示。

uni-app 中 manifest.json->h5->devServer 实际上对应 webpack 的 devServer，鉴于 manifest 为 json 文件，故 webpack.config.js->devServer 配置项下的简单类型属性均可在manifest.json->h5->devServer节点下配置，funciton 等复杂类型暂不支持。

 猜想能否使用proxy配置反向代理的方式去实现跨域请求，代码如下：

/* h5特有相关 */
"h5" : {
    "devServer" : {
         "port" : 8083, //端口号
          "disableHostCheck" : true,
          "proxy" : {
              "/api" : {
                  "target" : "http://localhost:8866/", //目标接口域名
                   "changeOrigin" : true,  //是否跨域
                   "secure" : false  // 设置支持https协议的代理
             }
        }
    }
}

此时需要用相对路径，不能使用绝对路径。

之前请求路径的配置需要进行更改：

本机转本机的跨域访问：当前访问的端口：http://localhost:8083 ——————>http://localhost:8866

本机转转云服务器的访问：

• 当前访问的端口：http://localhost:8083 ———代理———>http://158.25.125.15:8866

• 当前访问的端口：http://localhost:8083 ———代理———>http://api.itbooking.net

• 当前访问的端口：http://localhost:8083 ———代理———>http://www.itbooking.net:8866

uni.request({url:"http://localhost:8866/api/banner/load"}) 这个是不会转发，代表直接去请求
​
uni.request({url:"/api/banner/load"}) =----------http://localhost:8083 /api/banner/load -------uni.request({url:"http://localhost:8866/api/banner/load"})