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)
});
