React项目使用http-proxy-middleware中间件进行跨域请求

一、使用yarn添加依赖

yarn add http-proxy-middleware

二、在src目录下创建setupProxy.js文件，该文件和index.js文件同级

setupProxy.png

const { createProxyMiddleware } = require('http-proxy-middleware');  //注意写法，这是1.0以后的版本

module.exports = function (app) {
    app.use(createProxyMiddleware('/app',
        {
            target: 'http://yuhang.project.ibook.tech',
            pathRewrite: {
                '^/app': '',
            },
            changeOrigin: true,
            secure: false, // 是否验证证书
            ws: true, // 启用websocket
        }
    ));
};

三、使用axios发送跨域请求

发送请求.png

注意修改请求的域名，此处使用/app替换域名，你可以根据自己定义来进行替换。