美文网首页
uniapp H5本地调试中的跨域请求

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

作者: shier | 来源:发表于2022-05-25 18:10 被阅读0次

    比如请求的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!

    相关文章

      网友评论

          本文标题:uniapp H5本地调试中的跨域请求

          本文链接:https://www.haomeiwen.com/subject/mbtyprtx.html