Vue解決跨域

congig/index.js

    proxyTable: {
      "/api":{
        target:"需要訪問的地址",
        changeOrigin:true,
        pathRewrite:{
          '^/api':''
      }
    }

main.js

import axios from './http/axios';
Vue.prototype.$ajax = axios

 封裝axios

import axios from 'axios'
import qs from 'qs'
import router from '../router/index';
import Vue from "vue";
import { Toast } from 'vant';

//配置全局的axios默認值（可選）
//請求地址
axios.defaults.baseURL = '/api'

axios.defaults.timeout = 15000; //響應時間
//配置請求頭
axios.defaults.headers.get['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

//攔截器

axios.interceptors.request.use(config => {
  if (config.data instanceof FormData) { // 如果是FormData類型，表示爲上傳圖片
    return config;
  }
  if (config.method === 'post') {
    config.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
    config.data = qs.stringify(config.data);
  }
  if (config.method === 'get') {
    config.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
    if (config.data) {
      config.url += "?" + qs.stringify(config.data);
    }
  }
  return config;
}, error => {
  console.log(error);
  console.log('攔截器錯誤');
  return Promise.reject(error);
});

//添加一個響應攔截器
axios.interceptors.response.use(res => {
  //在這裏對返回的數據進行處理
  if (res.status == 200) {
    return res.data;
  }
}, err => {
  return Promise.reject(err);
})

function checkStatus(res){
    if (!res.status) {
      Toast.fail(res.infor);
      return;
    }
    return res;
}

function checkCode(res){
  return '連接錯誤，請稍後再試';
}


export default {
  axiosPosts(url, params) {
    return new Promise((resolve, reject) => {
      axios({
        method: 'post',
        url: url,
        data: params,
        headers: {
          'UseFormData': false,
          'Content-Type': 'application/json;charset=utf-8'
        },
      })
        .then(res => {
          resolve(checkStatus(res));
        }, err => {
          reject(checkCode(err));
        })
        .catch((error) => {
          reject(checkCode(error))
        })
    })
  },
  //返回一個Promise(發送get請求)
  axiosGet(url) {
    return new Promise((resolve, reject) => {
      axios.get(url)
        .then(response => {
          resolve(response);
        }, err => {
          reject(err);
        })
        .catch((error) => {
          reject(error);
        })
    })
  },
  //返回一個Promise(發送上傳文件請求)
  axiosUpload(url, params) {
    return new Promise((resolve, reject) => {
      // store.dispatch('setLoadingStatus', true);
      axios({
        method: 'post',
        url: url,
        data: params,
        headers: {
          'Content-Type': 'multipart/form-data',
        },

      })
        .then(response => {
          resolve(checkStatus(res));
        }, err => {
          reject(checkCode(err));
        })
        .catch((error) => {
          reject(checkCode(error))
        })
    })
  },
}