react使用axios以及设置代理(http-proxy-middleware)

前面已经搭建了基本页面，接下来就是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)
     })
 };