- 思路：
axios设置公共请求头：通过axios配置，设置统一的baseURL;
开发环境 & 生产环境接口地址: 通过脚手架提供的环境变量来解决:
1.在项目根目录创建 .env.development文件，配置REACT_APP_URL = http://localhost:8080
在开发期间生效，npm start的时候自动读取.env.development文件中的环境变量来设置接口；
在项目根目录创建 .env.production文件，配置REACT_APP_URL = 线上地址，
npm run build的时候自动读取.env.development文件中的环境变量来设置接口2.在该文件中添加环境变量REACT_APP_URL（注意: 环境变量约定以REACT_APP_ 开头）
3.设置REACT_APP_URL的值默认为 http://localhost:8080，
并重启脚手架4.创建utils/url.js文件, 在url.js中创建BASE_URL变量，设置其值为process.env.REACT_APP_URL
5.在页面中导入url文件，并修改请求路径，图片路径等等；
1,2,3,4
5
axios官方文档：http://www.axios-js.com/docs/
6
到第6步骤，axios请求接口成功，但实际上每个页面的axios.get(都添加了BASE_URL)；
接下来封装一个简易的axios，只需在一个js文件中设置统一请求路径
6 创建api.js，封装axios
7 在页面中导入封装好的axios即可
扩展: 封装react axios拦截器统一添加token
import axios from 'axios'
import { BASE_URL } from './url'
// import {HashRouter} from 'react-router-dom' //如果使用的是hash路由类型，使用这个
// const router = new HashRouter()
import {BrowserRouter} from 'react-router-dom'
const router = new BrowserRouter()
const API = axios.create({
baseURL: BASE_URL
})
// 添加请求拦截器
API.interceptors.request.use(config=>{
const { url } = config;
//当url不是/login 或 不是/register请求路由时(这两个路由不需要token)， 请求头添加token
if(!url.startsWith('/login') || !url.startsWith('/register')){
//当url以/user开头的时候，
config.headers.Authorization = localStorage.getItem('token');
}
return config
})
API.interceptors.response.use(response => {
const { status } = response.data; //这里的response数据结构不一样，直接打印出来看，参照后端返回的结果
if(status === 400 || status === 401 || status === 402 || 403){
localStorage.removeItem('token');
//当token超时or失效 403账号无权限的时候直接跳转到/login页重新登录
router.history.push('/login')
}
return response
})
export { API }
