react axios配置代理（proxy)，解决本地开发时的跨域问题

前言

本文基于 (“react”: “^16.13.1”) 版本
react官方脚手架默认是将webpack配置隐藏起来了，在进行配置之前需要将webpack给暴露出来。

1.输入命令 npm run eject

会出现一个命令提示：这是一个单向操作，确认操作后不可逆转/返回?
输入 y 回车
成功之后 在项目根目录出现 config 文件夹

2.打开 config 文件夹下的 webpackDevServer.config.js 文件

3.进行搜索 proxy ,大概在 104 行的位置
4.参照如下格式，配置代理

 // 配置代理
 proxy: {
	'/api': {
        target: 'http://localhost:9000', // 后台服务地址以及端口号
        ws: true,
        changeOrigin: true, //是否跨域
        pathRewrite: { '^/api': '/' }
      }
 },

5.在项目中使用， /api + 后台接口地址

为了方便演示，在 componentDidMount 生命周期进行 axios 请求。

注：本文接口地址基于我自己公司后台同事提供的后台地址，实际使用中须替换你自己后台同事的地址

import React, { Component } from 'react';
import axios from 'axios';

class App extends Component {
  componentDidMount() {
    axios.get('/api/logout')
      .then(res => {
        console.log(res);
      })
  }
}

export default App;

7.请求结果

8.如果不想使用 api 作为代理名称

第二行以及第六行需要同时更改，否则不生效
项目需要重新启动，否则不生效

proxy: {
	'/xlz': {
        target: 'http://192.168.1.8:8022',
        ws: true,
        changeOrigin: true, //是否跨域
        pathRewrite: { '^/xlz': '/' }
      }
},