为什么在create-react-app项目中需要配置proxy代理？

核心作用 #

这个文件是create-react-app官方提供的本地开发阶段专属代理配置文件，底层基于http-proxy-middleware中间件实现请求转发，你给出的示例配置实际定义了2条转发规则：

• 匹配所有/api/mobile-activity/ws开头的请求，转发到本地http://localhost:3001/socket.io服务，转发时自动去掉路径里的/api/mobile-activity/ws前缀，同时支持WebSocket长连接协议
• 匹配所有/api/vehicle-accident-protocols开头的请求，转发到局域网服务器http://10.1.1.24:7071，转发时自动去掉路径里的/api/vehicle-accident-protocols前缀

配置的必要性 #

你之所以需要做这个配置，核心是解决本地开发场景下的两个核心问题：

1. 绕过浏览器同源策略的跨域限制 #

浏览器默认有同源策略安全规则：只有当发起请求的页面地址和目标接口地址的协议、域名、端口三者完全一致时，请求才能正常发送，否则就会报跨域错误直接拦截。
本地启动的React开发服务器默认运行在localhost:3000，而后端服务要么跑在本地其他端口、要么跑在其他服务器，和前端地址肯定不同源，直接请求必然跨域。而这个代理是运行在本地Node服务层的，Node服务发请求不受浏览器同源策略限制，相当于做了一层中转，就完美解决了本地开发的跨域问题。

2. 统一前后端请求路径规则，减少冗余适配 #

如果不用代理，你本地开发时需要把所有接口请求都写成完整的后端地址，比如http://10.1.1.24:7071/list，上线的时候又要全部改成线上后端地址，不仅容易出错，还需要后端额外配置跨域规则。
用了代理之后，前端不管是本地开发还是线上部署，都可以统一用相对路径发请求，比如/api/vehicle-accident-protocols/list，上线时只需要在Nginx等服务器上配置对应路径的转发规则即可，不用修改任何前端业务代码。

额外的开发便利 #

所有前端请求统一走本地开发服务器中转，你可以很方便的查看请求日志、篡改请求参数调试，不用频繁修改后端的跨域配置适配本地开发。

内容的提问来源于stack exchange，提问作者user17430594