最近在用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 · GitHub
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");
}); 
原始碼地址：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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/300488.html
標籤：其他
上一篇：陣列（Array)常用方法