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

最新推荐文章于 2025-06-10 10:32:57 发布

原创最新推荐文章于 2025-06-10 10:32:57 发布 · 2k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #vue.js #前端

本文介绍了在uniapp中如何解决从小程序转为H5时遇到的跨域问题。通过在manifest.json配置代理，并进行路径重写，解决了H5的跨域障碍。同时，文章提到了条件判断的使用，以确保代码在不同平台的正确运行。作者强调了配置代理后重新编译的重要性，并祝愿读者在技术道路上顺利前行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天又是开心的一天，作为一名程序员解决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中配置代理以后要重新编译

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