vue中axios跨域請求（proxy）

axios Proxy跨域

axios 設置 Proxy 跨域

在 package.json 同級目錄下新建 vue.config.js

module.exports = {
  devServer: {
    proxy: {
      //設置代理
      "/devapi": {
        target: "http://127.0.0.1:3000", // 接口的域名
        changeOrigin: true,
        pathRewrite: {
          "^/devapi": "" //通配符
        }
      }
    },
  },
}
//設置完成後重啓npm

封裝 axios.js

import axios from 'axios'

//判斷是否開發環境
const BASEURL = process.env.NOOE_ENV === 'production' ? '' : '/devapi'

const service = axios.create({
  baseURL: BASEURL,
  timeout: 5500
})

//post 請求
service.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

//添加請求攔截器
service.interceptors.request.use(function (config) {
  // 在發送請求之前做些什麼
  if (config.method === 'post') {
    config.data = qs.stringify(config.data)
  }
  return config;
}, function (error) {
  // 對請求錯誤做些什麼
  return Promise.reject(error);
});

// 添加響應攔截器
service.interceptors.response.use(function (response) {
  // 對響應數據做點什麼
  return response;
}, function (error) {
  // 對響應錯誤做點什麼
  return Promise.reject(error);
});

export default service;

把 封裝的axios 導入到main.js

import service from './utils/axios.js'
Vue.prototype.$http=service

之後可以直接調用發起跨域請求

this.$http.request({
    method: 'get',
    url: '/home/multidata',
    data: {}
  })
}