React：解决跨域问题

安装http-proxy-middleware

yarn add -D http-proxy-middleware;

配置

在src文件夹下创建『setupProxy.js』文件，写入以下内容

const proxy = require('http-proxy-middleware');

// 注意：文件名后缀必须是js
module.exports = function (app) {
    app.use(
        '/api',
        proxy.createProxyMiddleware({
            target: 'http://localhost:8888',
            changeOrigin: true,
            logLevel: "debug", // 日志等级：'debug' | 'info' | 'warn' | 'error' | 'silent'
            pathRewrite: {
                '^/api': ''
            },
        })
    );
}

在scripts/start.js中，配置：

    const devServer = new WebpackDevServer(compiler, serverConfig);  // 已有代码
    require('../src/setupProxy')(devServer);  // 指定配置文件，如过『setupProxy.js』放在src目录下，该项可不配置

强调：在src目录创建js文件，可不对scripts/start.js进行配置

使用

axios.get("/api/findAll"); // 由于pathRewrite配置，/api在请求target时，会被替换为''。