Uniapp中h5跨域解决
H5为啥会存在跨域问题小程序一切都正常的请求调用App一切都正常的请求调用此跨域问题只存在于浏览器端,App和小程序不存在跨域问题出现如下报错参考地址:manifest.json官方配置文档: uni-app官网Chrome 调试跨域问题解决方案之插件篇: uni-app H5跨域问题解决方案(CORS、Cross-Origin) - DCloud问答其实uni-app官方有解决跨域的办法,官方推
-
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"})
更多推荐
所有评论(0)