1. 程式人生 > >解決Vue請求 ‘No 'Access-Control-Allow-Origin' header is present on the requested resource’錯誤

解決Vue請求 ‘No 'Access-Control-Allow-Origin' header is present on the requested resource’錯誤

如果我們用VueResouce直接請求,這樣寫(以豆瓣api為例):

this.$http.get('https://api.douban.com//v2/movie/top250').then((response) => {
        this.movie = response.data;
        console.log(this.movie); 
});

就會報錯:

因為這是一個跨域的請求,不能直接去訪問別的後臺,這裡可以用JSONP解決這個問題,直接改寫成:

複製程式碼

 this.$http.jsonp('https://api.douban.com//v2/movie/top250', {},
   { 
      headers: {},
      emulateJSON: true }).then((response) => {
        this.movie = response.data;
        console.log(this.movie);
      });

複製程式碼

就能夠正確返回資料了:

豆瓣預設返回20個數據,你可以通過start=a&count=b來取得你想要的a-b的資料

至於想了解什麼是jsonp,可以看這位博主的文章,講的很詳細:

http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html