解决uni-app开发环境中H5端跨域问题
此跨域问题只存在于浏览器端,App和小程序不存在跨域问题
参考地址:
manifest.json官方配置文档: https://uniapp.dcloud.io/collocation/manifest?id=devserver
Chrome 调试跨域问题解决方案之插件篇: https://ask.dcloud.net.cn/article/35267
其实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" : 8000, //端口号 "disableHostCheck" : true, "proxy" : { "/api" : { "target" : "https://xxx.xxxxx.cn", //目标接口域名 "changeOrigin" : true, //是否跨域 "secure" : false // 设置支持https协议的代理 } } } }
最后发现问题解决了。