vue代理解决跨域步骤

在src目录下创建api文件，封装https.js

import axios from 'axios'

axios.defaults.timeout =30000

// 添加响应拦截器
axios.interceptors.response.use(function (response) {

    //可以写if判断，提前拦截错误信息

    return response;

}, function (err) {

    return Promise.reject(err);
});


export function apiGet(url, params){ 
    return new Promise((resolve, reject) =>{ 
        axios.get(url, { 
            params: params,
            herader:{"token":sessionStorage.getItem('token')}
        }).then(res => {
            resolve(res.data);
        }).catch(err =>{
            reject(err.data) 
        }) 
   });
}



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

根目录下创建vue.config.js

// "use strict";
module.exports = {
      devServer: {
        disableHostCheck: true,
        proxy: {
          '/api': {
            target: "http://xxx.xxx.xxx.xx:10082",//需要访问的路径
            ws: true,
            changeOrigin: true,
            pathRewrite: {'^/api' : ''}
          }
        }
      },
      publicPath:"./",
}

在main.js中引用

import axios from 'axios'
import { apiGet, apiPost } from './api/https'

Vue.prototype.$axios = axios;
Vue.prototype.$apiGet = apiGet
Vue.prototype.$apiPost = apiPost

使用

• get方法

  this.$apiGet("/api/xxxx/xxxx").then((res) => {
    console.log(res)
  });
  

• post方法

  this.$apiPost("/api/xxxx/xxxx?unitType=core").then((res) => {
    console.log(res)
  });