使用uni-app从服务器读取JSON文件时的跨域问题

最新推荐文章于 2025-11-06 11:22:13 发布

原创最新推荐文章于 2025-11-06 11:22:13 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #json #服务器

本文详细介绍了uni-app在H5环境下解决跨域问题的两种方法，包括CORS和路径重写。通过修改`src/manifest.json`文件中的devServer配置，设置代理服务器来实现跨域请求。示例代码展示了如何针对`/uploads`目录进行配置，并给出了前端请求的示例。尽管官方文档内容较长，但实际应用中可能需要根据具体情况进行调整。

官网的解释：uni-app H5跨域问题解决方案（CORS、Cross-Origin），别看是官网，内容很长，没解决问题

参考：uni-app踩坑+小改造，写法上有问题，广告一堆，看起来也有问题

参考还是有一定用的，不过写法要注意一下，修改src\manifest.json文件

    "h5" : {
        "devServer" : {
            "https" : false,
            "proxy" : {
                "/uploads": {
                    "target" : "https://你的域名/uploads",
                    "changeOrigin": true
                }
            }
        },
        ...
     ...

有时需要这样写才有效

    "h5" : {
        "devServer" : {
            "https" : false,
            "proxy" : {
                "/uploads": {
                    "target" : "https://你的域名",
                    "changeOrigin": true,
                    "pathRewrite" : {
                        "^/uploads": "/uploads"
                    }
                }
            }
        },
        ...
     ...

注意，uploads目录要匹配，下面是前端代码

      uni.request({
        url: '/uploads/xxxxxxxx.json',
        method: 'get',
        success: res => {
          that.workHistory = res.data
        }
      })