vue统一管理api和proxy跨域

1、建立三个文件夹

api.js：用来存放所有的接口地址
axios.js：用来封装axios请求
request.js：用于所有页面中的请求方法存放

2、api.js

const URL = 'http://10.100.100.60:9001'
export const getCompanyDydjList= URL + "/mobileBackstage/appCommon"

3、axios.js

import axios from 'axios'
import QS from 'qs'

axios.defaults.timeout = 10000;

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

// http request 请求拦截器，有token值则配置上token值
let token = "WebToken:eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpbnRpbWUiOiIyMDIxLTA3LTIzIDE0OjE3OjE5IiwiZXhwIjoxNjI3MTA3NDM5LCJ1c2VySWQiOiIwNmMzNTJjNjhjM2Q0NWQxYjgzNWwqeqwjMTkxNCJ9.wxpnROKDuxuBDrgd8iubiR-y-fgWj7VtBgyrSBBe7Wk"
axios.interceptors.request.use(
  config => {
  	let token=localStorage.getItem("token") 
    if (token) { // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
      config.headers.common['token'] = token;
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  });

axios.interceptors.response.use(response=>{
	return response.data
	},error=>{
		if(error.response){
			switch(error.response.status){
				//=>错误代码状态处理
			}
			例：
			switch(error.response.status===401){
					 alert("登录信息已过期，请重新登录")
    				 router.replace({
	       				 path: '/start/login/personlogin' // 到登录页重新获取token
	    				})
        				localStorage.removeItem('token')
        				localStorage.removeItem('user')
        				return Promise.reject(error)
   			 }
		}
		}else{
			if(!window.navigator.online){
				//=>断网处理
				return;
			}
			return Promise.reject(error)
		}
	}
)

export function get(url, params) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params: params
    }).then(res => {
      resolve(res.data);
    }).catch(err => {
      reject(err.data)
    })
  })
}

export function post(url, params) {
  return new Promise((resolve, reject) => {
    console.log(params);
    axios.post(url, QS.stringify(params))
      .then(res => {
        resolve(res.data);
      })
      .catch(err => {
        reject(err.data)
      })
  });
}

4、request.js

import * as api from './api'
import { get, post } from './axios'

export function CompanyDydjList() {
  let data = {}
  let url = api.getCompanyDydjList
  return post(url, data)
}

5、在vue文件中的应用

import { CompanyDydjList } from "../utils/request.js";

CompanyDydjList().then((res) => {
      if (res.code === 200) {
        let data = res.data;
        console.log(data);
      }
    });

6、proxy跨域

建立vue.config.js文件放最外面级别

module.exports = {
  lintOnSave: false, // 关掉代码校验
  devServer: {
    proxy: {
        '/api': {
            target: 'https://csdn.net/weixin',  // 后台接口域名
            ws: true,        //如果要代理 websockets，配置这个参数
            secure: false,  // 如果是https接口，需要配置这个参数
            changeOrigin: true,  //是否跨域
            pathRewrite:{
              '^/api': ''
          }
        }
    }
  }
};