uniapp小程序转H5轻松解决跨域问题

今天又是开心的一天，作为一名程序员解决bug内心是无比快乐的感觉

好了不扯了，直接主题，大家都知道uniapp可以完成一套代码运行多个平台，最近公司的项目就是uni写的一个小程序，因为业务需求，最近让转H5，运行一堆报错，然后就有了这篇博客

大家都知道小程序是没有跨域的，转H5之后首先解决的就是跨域问题，个人也是翻看了很多帖子，大致解决跨域问题的都相似雷同，以下是uniapp解决H5跨域实现

我们首先要在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"
    }

这里要注意，我也是吃过坑的希望大家不要像我一样走弯路，就是在配置代理是千万不要忘记要路径重写为" / " ,不然不会报错但是也没有效果

如果想在多平台运行 我们就要考虑是在H5运行还是小程序运行

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

加上这层条件判断在其他代码我们就不用去改了

最后我们千万要记住在manifest.json中配置代理以后要重新编译

最后我们千万要记住在manifest.json中配置代理以后要重新编译

最后我们千万要记住在manifest.json中配置代理以后要重新编译

重要的事说三遍怕你们忘记了，最后祝大家以后升职加薪迎娶白富美。