axios跨域學習總結

一、axios攔截器

在請求或響應被then或catch處理前攔截它們

// 新增請求攔截器
    axios.interceptors.request.use(function(config) {
      // 在傳送請求之前做些什麼
      return config
    }, function(err) {
      // 對請求錯誤做些什麼
      return Promise.reject(error)
    })

    // 新增響應攔截器
    axios.interceptors.response.use(function(response){
      // 對響應資料做些什麼
      return response
    },function(err){
      // 對響應錯誤做些什麼
      return Promise.reject(error)
    })

二、axios跨域方法總結

1）伺服器端設定跨域：

header(“Access-Control-Allow-Origin:*”); 
header(“Access-Control-Allow-Headers:content-type”); 
header(“Access-Control-Request-Method:GET,POST”); 

2）前端設定代理伺服器
vue-cli專案下的config->index.js

proxyTable: {
    '/api': { // 自己定義的名字
        target: 'http://music.163.com/api',
        changeOrigin: true, // 允許跨域
        pathRewrite: {
          '^/api': '' // 用‘api’代替target裡面的地址
       }
    }
 },

// 頁面中使用
mounted() {
    axios.get(
      '/api/playlist/detail?id=19723756'
      // {
      // data: {}, // 如果為post請求
      // headers: {
      //   'Content-Type': 'application/x-www-form-urlencoded' // post請求必須加
      // }
    ).then(res => {
      this.musics = res.data.result.tracks
      console.log(this.musics)
    }, err => {
      console.log(err)
    })
  }