Convert uniapp applet to H5 to easily solve cross-domain problems

Today is another happy day. As a programmer, solving bugs is an extremely happy feeling

Okay, let’s stop talking, let’s go straight to the topic. Everyone knows that uniapp can complete a set of codes to run multiple platforms. Recently, the company’s project is a small program written by uni. Because of business needs, it has recently transferred to H5, running a bunch of error reports, and With this blog

Everyone knows that small programs do not have cross-domain. After converting to H5, the first solution is to solve the cross-domain problem. I personally read a lot of posts, and the solutions to cross-domain problems are similar. The following is how uniapp solves H5 cross-domain implementation

We first need to configure the following code in manifest.json

 

// h5端跨域配置
"h5" : {
    "devServer" : {
		"port": 8000, //端口号
        "disableHostCheck" : true,
        "proxy" : {
            "/api" : {
                "target" : "https://api.ggjtaq.com/v1.0", //源地址
                "changeOrigin" : true,    // 是否跨域
                "secure" : false,    // https
                "pathRewrite" : { // 路径重写
                    "^/api" : "/"
                }
            }
        }
    },
    "router" : {
        "mode" : "history"
    }

It should be noted here that I have also suffered from pitfalls. I hope that everyone will not take detours like me. That is, when configuring the proxy, don’t forget to rewrite the path to "/", otherwise there will be no error but no effect.

If we want to run on multiple platforms, we have to consider whether to run on H5 or small programs

// 运行在h5
		//#ifdef H5 
			apiurl: '/api',  // 因为我们之前配置代理了这里我们用'/api'就可以了
		//#endif
// 运行在小程序
		//#ifdef MP-WEIXIN 
			apiurl:
				'https://www.baidu.com', //这是之前运行在小程序的源地址
			
		//#endif

With this level of conditional judgment, we don’t need to change it in other codes

Finally, we must remember to recompile after configuring the proxy in manifest.json

Finally, we must remember to recompile after configuring the proxy in manifest.json

Finally, we must remember to recompile after configuring the proxy in manifest.json

Say the important thing three times for fear that you will forget it. Finally, I wish everyone a promotion and salary increase in the future to marry Bai Fumei.