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

2022-05-25  本文已影响0人  shier

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

步骤一:打开mainfest.json文件配置,添加\color{red}{h5配置}
"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!

上一篇 下一篇

猜你喜欢

热点阅读