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