Uni-App - 内网穿透、跨域配置

最新推荐文章于 2025-07-15 17:36:32 发布

陆克和他的代码

最新推荐文章于 2025-07-15 17:36:32 发布

阅读量5.9k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： # Uni-App 文章标签： Uni-App 内网穿透、跨域配置 devServer h5 manifest.json 1024程序员节

本文链接：https://blog.csdn.net/Dream_Weave/article/details/100149080

Uni-App 专栏收录该内容

30 篇文章

订阅专栏

本文介绍uni-app中解决跨域请求的方法，包括官方推荐的HBuilderX内置浏览器预览和Chrome插件尝试，最终通过在manifest.json中配置devServer与proxy实现反向代理解决跨域问题。

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

manifest.json官方配置文档： uni-app官网

Chrome 调试跨域问题解决方案之插件篇： uni-app H5跨域问题解决方案（CORS、Cross-Origin） - DCloud问答

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

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

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

/* h5特有相关 */
"h5" : {
    "devServer" : {
         "port" : 8000, //端口号
          "disableHostCheck" : true,
          "proxy" : {
              "/api" : {
                  "target" : "https://xxx.xxxxx.cn", //目标接口域名
                   "changeOrigin" : true,  //是否跨域
                   "secure" : false  // 设置支持https协议的代理
             }
        }
    }
}

附：内网访问配置

"h5" : {
      "devServer": {
          "port": 8888,
          "historyApiFallback": true,
          "host": "0.0.0.0",
          "disableHostCheck": true,
          "noInfo": true
      },

      "router":{  
        "mode":"history"  
      }  
}