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

太过爱你忘了你带给我的痛 2021-09-01 08:08 1642阅读 0赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70][]

到这里所有配置就基本完成，在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)
         })
     };

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70]: /images/20210813/f3896d7247f142cc8c8d7de1cf367863.png