react跨域和快速解决跨域的方法

零、先看版本

"react": "^17.0.2",
"http-proxy-middleware": "^2.0.0"

一、跨域

1.安装 http-proxy-middleware

cnpm install --save-dev http-proxy-middleware

注：–save-dev 只在本地使用

2.配置

重点：在src目录下创建setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware'); 

module.exports = function (app) {
    app.use(createProxyMiddleware('/api',
        {
            target: 'http://localhost:3010', //换成你自己的域名
            pathRewrite: {
                '^/api': '',
            },
            changeOrigin: true,
            secure: false, // 是否验证证书
            ws: true, // 启用websocket
        }
    ));
};

3.使用

function test(params) {
    let api = '/api/admin/user';
    axios.get(api)
        .then((res) => {
            console.log(res);
        })
        .catch((error) => {
            console.log(error);
        })
}

二、后台

此处使用nestjs从数据库获取用户列表作为测试，无权限，接口如下，postman测试成功

http://localhost:3010/admin/user

三、测试

// 前端
http://localhost:3000/#/login

// 点击获取所有用户-正常

完美解决