混子前端带你解决react项目跨域问题

1,666 阅读1分钟
最近混子前端手中事情繁杂,很久没有更新掘金了,今天分享给大家一个react项目很实用的跨域插件 http-proxy-middleware,希望能够帮助正在写 react 项目的你。

首先项目常规操作,安装 http-proxy-middleware 插件:

npm install http-proxy-middleware

在src文件夹创建 setupProxy.js 文件:

最后我们只需在start.js里做一下配置即可:


这样在发送请求的地方只需要使用 /api/接口路径,即可实现前端本地服务代理:

这里我使用的是fetch,大家可以根据自己喜好选择axios也可以。


注意:这里仅仅是前端本地服务代理跨域,如果需要部署在线上环境看运行效果,需要运维去手动写入nginx配置或其他进行反向代理,项目在线上是部署在 nginx 服务上的,运维代码参考博客:my.oschina.net/foreverich/…


最后欢迎大家点在和纠错

祝大家工作日愉快,加班狗继续加班。