uniapp H5本地调试中的跨域请求

比如请求的url为https://douban.xhboke.com/top250?page=1
现在使用本地代理的方式去解决跨域，主要有下面2个步骤

步骤一：打开mainfest.json文件配置，添加\color{red}{h5配置}
  • 修改target域名，这个域名就是你导致跨域错误的域名；
  • 我这边用\color{red}{localrequest}标识做拦截，后面在步骤二设置的地方将要请求的域名前缀替换成这个标记
"h5": {
        "devServer": {
            "disableHostCheck" : true,
            "proxy": {
              "/localrequest": {
                "target": "https://douban.xhboke.com",
                "changeOrigin" : true,
                "secure" : false,
                "pathRewrite": {
                  "^/localrequest": ""
                }
              }
            }
        }
    }
步骤二：修改请求地址

注意我写的前缀\color{red}{localrequest}，很多解决跨域问题的博主都喜欢写\color{red}{api}这类关键词，容易让人混淆。

uni.request({
                url:"/localrequest/top250?page=1",
                method:"GET",
                success(res) {
                    console.log("list:"+res);
                },
                fail(error) {
                    console.log(error);
                }
            })

正常情况下，设置好以上2个步骤基本就好了，但有时候会没有效果，请按照下面的的注意事项依次检查

注意事项：
  1. 如果你当前在调试的时候设置跨域，可能修改了mainfest.js也没有任何效果，需要你\color{red}{关闭控制台(正方形按钮)}，重启HBuider让配置生效。
    jianshu.png
  2. 重启项目后，需要再确认下你刚才修改的2个地方（mainfest.json和request的地方）是否真的\color{red}{变化}，有时候编译器问题，导致没有修改成功，最好确认一遍。
  3. 另外强烈建议你在运行前，修改任意测试代码部分，这样可以让开发工具达到\color{red}{重新编译}的效果，否则可能会出现因缓存而导致的修改无效的问题，这边我就遇到了，挺坑的，后来还是查看了控制台才发现了这个问题。

It's all!

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容