react使用axios以及设置代理(http-proxy-middleware)_createproxymiddleware 有哪些参数

前面已经搭建了基本页面，接下来就是react项目中与后台对接

1.安装axios

npm install axios --save

2.在utils文件夹中创建request.js文件(配置axios封装请求方法)

import axios from 'axios'
import {getToken} from './auth'
const instance =  axios.create({
    baseURL:'/api',
    timeout:50000
})
instance.defaults.headers = {
    'Authorization':'Basic cGxhdGZvcm1fbGljZW5zZV9hZG1pbjpod192ZGlfbGljZW5zZQ=='
}
//请求发出前拦截
instance.interceptors.request.use(function(config){
    if(getToken()){
        //已经登录的请求头配置，主要用于登录成功后后台返回的token,做权限
        config.headers['Content-Type'] = 'application/json;charset=UTF-8';
 
    }else{
        // 未登录的请求头配置
    }
    return config;
},function(error){
    return Promise.reject(error)
})
//请求响应拦截
instance.interceptors.response.use(function(response){
    return response.data;
},function(error){
    return Promise.reject(error)
})
 
export function get(url,params){
    return instance.get(url,{
        params
    })
}
 
export function post(url, data){
     return instance.post(url,data)
}

3.配置接口文件(services文件夹下管理接口，创建auth.js文件) 

import { post } from '../utils/request'
 
export function loginApi(url,data){
    return post(url,data)
}

4.配置代理，可以访问到后台的服务器地址

安装依赖

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

在src文件夹中创建setupProxy.js内容配置如下

const {createProxyMiddleware} = require('http-proxy-middleware');
 
module.exports = function(app) {
  app.use('/api', createProxyMiddleware({ 
    target: '',//后台服务器地址
    changeOrigin: true,
    pathRewrite: {
    '^/api': '',
    },}))
};

在新版本中已经默认设置代理的文件夹名为setupProxy

到这里所有配置就基本完成，在login文件中发起登录请求就可

//在login中引入
import {loginApi} from '../../services/auth'
 
const onFinish = values => {
   loginApi(url,data).then((res)=>{
        setToken(res.token) //具体的token设置参考后台接口
        props.history.push("/admin")
    }).catch((err)=>{
            console.log(err)
     })
 };