react前端解决跨域方案

react 前端解决跨域

1. package.json中配置proxy

• 优点：简单,无需考虑版本
• 缺点：只能处理一类跨域请求
• 示例

  • // 在package.json中增加参数
    "proxy":"localhost:3030" //这样我们就可以实现跨域了。
    

2. http-proxy-middleware

• 优点：可以处理多类跨域api
• 缺点：需要考虑版本
• 示例

  •     // 在src 目录下创建setupProxy.js文件
       const { createProxyMiddleware } = require('http-proxy-middleware');  
        //注意写法，这是1.0以后的版本，最好按抄。这里的版本指的是'http-proxy-middleware
        module.exports = function (app) {
        app.use(createProxyMiddleware('/api',
        {
            target: 'http://localhost:3030',
            /*
            * 这里有一个小坑，如果重写地址我们的后台接口是不需要更改的，如果不配置重写，我们的后台也需要加上/api.             
            */ 
            // pathRewrite: {
            //     '^/api': '',
            // },
            changeOrigin: true,
            secure: false, // 是否验证证书
            ws: true, // 启用websocket
        }
        ));
    };
    

总结：

• 自己同时编写前后端对于理解http很有帮助，在这里踩了很多坑。最为郁闷的就是在配置了setupProxy.js只有react start跑不起来了.....惊了。报错require().....not a function。不要慌。。。稳住。。。