UniApp multi-terminal development H5 cross-domain problem error reporting solution

When uniapp encounters the mini program during development, it can request the data interface normally, but when running on the H5 end, it reports an error that the interface cannot be accessed. The error is as follows:

 The above error message indicates that the source of the data is different from that of the server. Under the same-origin policy of the browser, such an error will be reported, that is, a cross-domain problem. There are two main ways to solve this error. It is effective in personal testing! ! ! !

Method 1:  Using UniApp's built-in browser to run the project can solve this problem, but you need to install the built-in browser plug-in. The method is simple.

 Method 2: Set the proxy in the configuration file to solve the cross-connection problem

 Find the following configuration of H5 configuration items in the source code view (the data is in JSON format):

   "h5" : {
        "devServer" : {
            "disableHostCheck" : true,
            "proxy" : {
                "/api" : {
                    "target" : "https://linggong.74cms.com",//数据请求的接口网址
                    "changeOrigin" : true,//是否开启跨域
                    "pathRewrite" : {
                        "^/api" : "" 
                    }
                }
            }
        },
}

 After completion, write conditional compilation in axios data request:

 The above steps can basically solve the problem:

 Ok! Request successful! ! !

If there are any deficiencies or better methods, please correct me and communicate!

Reference article URL: https://juejin.cn/post/7122655997994205197