【webpack】解决axios跨域

1、通过NPM安装http-proxy-middleware模块：

npm install --save-dev http-proxy-middleware

2、webpack配置http-proxy-middleware模块：

// webpack.config.js
//...
const proxy = require('http-proxy-middleware');

const config = {
  devServer:{
        host: '本地IP',
        port: 8080,  //启动该项目的端口号
        proxy:{
            '/api':{
                target: '访问后端IP:端口号',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': '/'
                }
            }
        }
    },
  entry: {
        main: './main'
  },
  //...
};

module.exports = config;

3、axios配置：

axios是基于Promise的HTTP库，同时支持前端和Node.js。
a）首先用NPM安装axios：
npm install axios --save
b）在项目根目录下创建libs文件夹，并在libs下新建util.js文件，项目中使用的工具函数可以在这里封装。例如axios的封装：

// axios.js
import axios from 'axios';

// 基本配置
const Util = {
    imgPath: '',
    apiPath: '/api'
};

// Ajax通用配置
Util.ajax = axios.create({
    baseURL: Util.apiPath
});

// 添加响应拦截器
Util.ajax.interceptors.response.use(res => {
    return res.data;
});

export default Util;

4、调用axios请求API：

//导入util.js文件
import $ from './../libs/util.js';
//GET请求：
$.ajax({
        url: url,  //url为请求的接口
        method: 'GET',
        params: params  //接口连接带的参数，没有可以为null
    }).then(res => {
        console.log(res)
    }).catch(err => {
        console.log(err)
    });

//POST请求：
$.ajax({
        url: url,  //url为请求的接口
        method: 'POST',
        data: data  //post请求所需的数据
    }).then(res => {
        console.log(res)
    }).catch(err => {
        console.log(err)
    });