3.解决uni-app开发环境中H5端跨域问题

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

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

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

所以我就在想是不是可以使用proxy配置反向代理的方式去实现跨域请求,代码如下:

    "h5": {
        "title": "huaxi",
        "router": {
            "mode": "hash",
            "base": "/h5/"
        },
        "devServer": {
            "port": 8080,
            "disableHostCheck": true,
            "proxy": {
                "/api": {
                    "target": "http://api.bloomage.bailingkeji.com",
                    "changeOrigin": true, //是否跨域
                    "secure": false // 设置支持https协议的代理
                }
            }
        }
    }

"h5": {
            "devServer": {
                "port": 80,
                "disableHostCheck": true,                
                "proxy": {
                    "/": {
                        "target": "域名或IP",
                        "changeOrigin": true,
                        "secure": false,
                        "ws":false,
                        "pathRewrite":{"^/":""}  //没有该配置,代理将不生效
                    }
                }
            }
        }

你可能感兴趣的:(3.解决uni-app开发环境中H5端跨域问题)