http-proxy-middleware（1.0以上新版本）解决react跨域问题

当前使用版本
“http-proxy-middleware”: “^1.0.6”,
“react”: “^16.14.0”,
“react-dom”: “^16.14.0”,
“react-router-dom”: “^5.2.0”,
“webpack”: “4.42.0”,

官网：https://www.npmjs.com/package/http-proxy-middleware

首先在src文件夹内创建一个setupProxy.js，注意路径及文件名均不可修改，即src/setupProxy.js

const {
  createProxyMiddleware
} = require('http-proxy-middleware');
module.exports = function (app) {
//devApi可改，是需要进行修改路径的后缀，会被pathRewrite替换重写
  app.use(createProxyMiddleware('/devApi',{
    target: 'http://xxx.com',//服务器地址
    changeOrigin: true,
    pathRewrite: { //路径替换
      '^/devApi': '', // axios 访问/api2 == target + /api
    }
  }));
};

requist.js

import axios from 'axios'
const instance = axios.create({
    baseURL: 'devApi',//根路径上会多个devApi，被视为需要处理跨域的，devApi可改，与setupProxy.js对应
    timeout: 3000
})
// 添加一个请求拦截器，可选操作
instance.interceptors.request.use(function (config) {
    // 做一些请求之前被发送
    if(config.method == 'post'){
      config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
    }
    config.headers['Authorization'] = `Bearer ${getToken()}`
    return config;
  }, function (error) {
    // 做一些与请求错误
    return Promise.reject(error);
  });
//请求
export function listApi(){
    return get('/xxx/xxx')
}

使用

import { listApi } from '../../../services/requist'
function List(props) {
    const [dataSource, setDataSource] = useState([])
    const [total, setTotal] = useState(0)
    useEffect(() => {
        listApi().then(res => {
            setDataSource(res )
            setTotal(res .length)
        }).catch(err=>{
            console.log(err)
        })
    }, [])
}

补充：

一般下载的新脚手架的项目根目录中没有config文件夹，首先暴露出项目配置文件，项目下执行:

1. npm run eject
2. yarn eject