本人菜鳥學徒一隻,幾天遇到了用vue,axios寫專案時的坑,在請求資料介面的時候,明明用get方式請求成功,json資料也返回到後臺了,偏偏控制檯報錯,提示'Access-Control-Allow-Origin'';

網上找了一個天,各種方法都試過,都不奏效,凌晨終於找到了解決方法:

import Axios from 'axios'; // 引入axios
Vue.prototype.$ajax = Axios; //掛載axios外掛的方法
import Axios from 'axios'; // 引入axios
Vue.prototype.$ajax = Axios; //掛載axios外掛的方法

我的webpack配置檔案是webpack.config.js,在配置中新增:

proxy: {
   '/api': {
      target: '要訪問的API域名(如:http://v.juhe.cn/toutiao/index)',
      changeOrigin: true, 
      pathRewrite: {'^/api': ''} 
   }
}

然後在需要訪問API的vue檔案中這樣寫

// get 請求
this.$ajax.get('/api' + url)  // url格式,如:?type=xxx&key=value
  .then(res => {
    console.log(res); 
  }) 
  .catch(err => { 
    console.log(err); 
  })
// post 請求  
this.$ajax.post('/api' + url,{
   headers: {'Access-Control-Allow-Origin': '*'}
})
  .then(res => { 
    console.log(res); 
  }) 
  .catch(err => { 
    console.log(err); 
  })
 

成功返回資料:

1. {data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}
   1. config:{adapter:ƒ,transformRequest:{…},transformResponse:{…},timeout:0,xsrfCookieName:"XSRF-TOKEN", …}
   2. data:{reason:"成功的返回",result:{…},error_code:0}
   3. headers:{date:"Fri, 06 Apr 2018 19:23:31 GMT",etag:"3af2b8bbb189b4c22cd9a06e6edd0255"
      ,connection:"close",x-powered-by:"Express",transfer-encoding:"chunked", …}
   4. request:XMLHttpRequest {onreadystatechange:ƒ,readyState:4,timeout:0,withCredentials:false,upload:XMLHttpRequestUpload, …}
   5. status:200
   6. statusText:"OK"
   7. __proto__:Object