React拦截器以及代理设置

设置拦截器封装axios的get post请求：

初始化项目后，我们在src目录下创建utils文件夹，内包含api.js和http.js两个文件。

api.js 主要包含我们请求后台的接口地址，简单举个例子：

let api = {
    home: '/api/home/content',
    login: `/api/sso/login`,
    ...
}

export default api

接下来，就是封装axios的http.js：首先我们需要安装axios的依赖：

yarn add axios -D or npm i axios -D

安装完成依赖之后，就需要在http.js中引入：

import axios from "axios";

let baseUrl = 'https://192.168.0.125:8085'

// 创建axios实例，在这里可以设置请求的默认配置
const instance = axios.create({    
    timeout: 10000, // 设置超时时间10s
    baseURL: baseUrl   // 根据自己配置的反向代理去设置不同环境的baseUrl
})
// 文档中的统一设置post请求头。下面会说到post请求的几种'Content-Type'
instance.defaults.headers.post['Content-Type'] = 'application/json'

/** 添加请求拦截器 **/
instance.interceptors.request.use(config => {
    config.headers['token'] = sessionStorage.getItem('token') || ''
    return config
}, error => {
    // 对请求错误做些什么
    return Promise.reject(error)
})

/** 添加响应拦截器  **/
instance.interceptors.response.use(response => {
    // console.log(response)
    // 响应结果里的 statusText: ''是我与后台的约定，大家可以根据实际情况去做对应的判断
    if (response.statusText === '') {     
        return Promise.resolve(response.data)
    } else {
        return Promise.reject(response.data.message)
    }
}, error => {
    if (error.response) {
        // token或者登陆失效情况下跳转到登录页面，根据实际情况，在这里可以根据不同的响应错误结果，做对应的事。这里我以401判断为例
        if (error.response.status === 401) {    
            //针对框架跳转到登陆页面
            this.props.history.push('/login');
        }
        return Promise.reject(error)
    } else {
        return Promise.reject('请求超时, 请刷新重试')
    }
})

/* 统一封装get请求 */
export const get = (url, params, config = {}) => {
    return new Promise((resolve, reject) => {
        instance({
            method: 'get',
            url,
            params,
            ...config
        }).then(response => {
            resolve(response)
        }).catch(error => {
            reject(error)
        })
    })
}

/* 统一封装post请求  */
export const post = (url, data, config = {}) => {
    return new Promise((resolve, reject) => {
        instance({
            method: 'post',
            url,
            data,
            ...config
        }).then(response => {
            resolve(response)
        }).catch(error => {
            reject(error)
        })
    })
}

封装完get post请求之后，我们需要在react的原型链上，绑定get和post方法，修改 src/index.js 文件：

import React, { Component } from 'react';
import { get, post } from './utils/http';
import api from './utils/api';

// 注意：Vue 框架是在Vue.prototype原型上绑定，而react不是在React.prototype原型上绑定，而是在Component上绑定

Component.prototype.get = get;
Component.prototype.post = post;
Component.prototype.api = api;

最后就是接口的请求，上一篇文章有所提及，按照要求请求接口即可。

Tips: 在接口的请求过程中，可能会遇到跨域的问题，接下来解决跨域的问题：
首先，跨域我们需要用到 http-proxy-middleware 这个中间件，去设置代理

yarn add http-proxy-middleware -D or npm i http-proxy-middleware -D

然后我们需要在src目录下新建setupProxy.js文件：

// 新版舍弃了proxy，采用的是 createProxyMiddleware 
const { createProxyMiddleware } = require("http-proxy-middleware");
 
module.exports = function(app) {
    app.use("/api",
        createProxyMiddleware({
            target: "https://192.168.0.125:8085",                   // 跨域地址
            changeOrigin: true,
            pathRewrite: {
                "^/api": ""
            }
        })
    );
};

// dva代理设置
{
    "proxy": {
        "/apis": {
            "target": "https://192.168.0.1:8085",                   // 跨域地址
            "changeOrigin": true,
            "pathRewrite": {
                "^/apis": ""
            }
        }
    }
}

到此，我们就可以跨域请求后台接口地址。