当前位置:首页 » 《随便一记》 » 正文

前端学习记录(十五) jsonbird解决跨域请求问题_早睡冠军王的博客

1 人参与  2021年11月10日 09:43  分类 : 《随便一记》  评论

点击全文阅读


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

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

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

        

在项目文件夹下安装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");
        });

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

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

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

详见官方接口文档地址: Home · xCss/JsonBird Wiki · GitHubicon-default.png?t=L892https://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");
        });

         

源码地址: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.https://github.com/EarlySleep-King/Web-StudyRecording/blob/main/vuecli/myapp/src/views/movie/Movie.vue

 

 

 


点击全文阅读


本文链接:http://zhangshiyu.com/post/30719.html

接口  数据  地址  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1