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

本文基于 react 17.x 版本

安装axios

npm install axios 

1.输入命令 npm run eject
运行报错的话点这里

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

3.进行搜索 proxy ,
将代码改成

proxy: {
// ‘/api’可以更改其他比如‘/ps’
      "/api": {
        target: "http://lochost:3000", // 后台服务地址以及端口号
        ws: true,
        changeOrigin: true, //是否跨域
        pathRewrite: { "^/api": "/" },
      },
    },

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

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

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

export default App;