前端学习记录(十五) jsonbird解决跨域请求问题

发布时间:2022-07-06 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了前端学习记录(十五) jsonbird解决跨域请求问题脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

最近在用vuecli框架搭建一个项目练习,其中一个页面需要猫眼电影的数据接口,想实现的最终效果如下F1a;

                ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​             

前端学习记录(十五) jsonbird解决跨域请求问题

打开chrome浏览器的network,在Xhr下可以快速找到相应的url地址

        

前端学习记录(十五) jsonbird解决跨域请求问题

在项目文件夹下安装axios工具包,便可以通过axios.get()方法获取猫眼返回的数据:(此接口不支持传参分页,所以将movieOnInfoList后的参数删掉无伤大雅)

    let Url =
        "https://m.maoyan.COM/ajax/movieOnInfoList";
      axios
        .get(Url)
        .then((res) => {
          this.dataList = res.data.movieList;
          console.LOG(this.dataList);
        })
        .catch(function () {
          console.log("error");
        });

 但这样直接运行会产生报错,原因便是这种请求方式产生了跨域问题

前端学习记录(十五) jsonbird解决跨域请求问题

当被请求url的协议、域名、端口三者之间任意一个与当前页面url不同时,即为跨域,很显然,现在当前页面的url与猫眼影数据接口url的协议、域名、接口三者均不相同

要解决跨域问题,其中一种方式便是使用远程数据接口代理,这里我使用jsonbird网站进行代理,这个网站有多种数据接口,这次便使用v2这一接口进行数据请求:

前端学习记录(十五) jsonbird解决跨域请求问题

详见官方接口文档地址: Home · xCss/JsonBird Wiki · GITHub

前端学习记录(十五) jsonbird解决跨域请求问题

https://github.com/xCss/JsonBird/wiki

使用v2接口时,在其接口地址后拼接原本想要访问的url接口地址,放进axios.get()中即可正常访问:

     let birdUrl =
        "https://bird.ioliu.cn/v2?url=https://m.maoyan.com/ajax/movieOnInfoList?";
      axios
        .get(birdUrl)
        .then((res) => {
          // console.log(res.data.movieList.length);
          for (let i = 0; i < res.data.movieList.length; i++) {
        //此循环功能为处理返回数据,与跨域无关
            res.data.movieList[i].img =
              res.data.movieList[i].img.substring(0, 22) +
              res.data.movieList[i].img.substring(26);
              console.log(res.data.movieList[i].img);
          }
          this.dataList = res.data.movieList;
          console.log(this.dataList);
        })
        .catch(function () {
          console.log("error");
        });

        

前端学习记录(十五) jsonbird解决跨域请求问题

 

码地址:Web-studyRecording/Movie.vue at main · EarlySleep-King/Web-StudyRecording · GitHubThis repository record Web learning file. Contribute to EarlySleep-King/Web-StudyRecording development by creating an account on GitHub.

前端学习记录(十五) jsonbird解决跨域请求问题

https://github.com/EarlySleep-King/Web-StudyRecording/blob/main/vuecli/myapp/src/views/movie/Movie.vue

 

 

 

脚本宝典总结

以上是脚本宝典为你收集整理的前端学习记录(十五) jsonbird解决跨域请求问题全部内容,希望文章能够帮你解决前端学习记录(十五) jsonbird解决跨域请求问题所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。