空境界

vue axios 跨域處理
1.在跟目錄下建立vue.config.js

2.設定配置

module.exports = {
 devServer: {
  proxy: {
   '/api': {
    target: '<url>',
    ws: true,
    changeOrigin: true
   },
   '/foo': {
    target: '<other_url>'
   },
   pathRewrite: { 
    '^/api': ''
   }
  }
 }
}

實際

module.exports = {
 devServer: {
  open: true,
  host: 'localhost',  // 設置主機地址
  port: 8080,         // 設置默認埠號
  https: false,
  //以上的ip和埠號是我們本機的;下面為需要跨域的
  proxy: {    //配置跨域
   '/api': {
    target: 'http://api.zhuishushenqi.com',   //這裡後台的地址模擬的，應該填寫真實的後台api
    ws: true,     // 如果要代理 websockets
    changOrigin: true,  //允許跨域
    pathRewrite: {
     '^/api': '' //請求的時候使用這個api就可以
    }
   }

  }
 }
};

 
3.使用axios的組件

// http://api.zhuishushenqi.com/ranking/gender
// http://api.zhuishushenqi.com改成配置的api
this.$axios.get("api/ranking/gender")
 .then(res => console.log(res.data))
 .catch(err => {});

4.重啟服務器