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。不要慌。。。稳住。。。
