前端Package.json中Proxy配置的作用及REST API调用原理咨询

核心作用 #

• 解决开发跨域问题：浏览器的同源策略要求前端页面和API服务必须协议、域名、端口完全一致，前端开发服务器通常跑在3000端口（比如Create React App默认），后端在5000端口时，直接请求会触发跨域错误，这个proxy配置就是用来绕开这个限制的。
• 简化API请求写法：配置后，前端调用API不用写完整的http://localhost:5000/api/xxx，直接写/api/xxx即可，代码更简洁易维护。

调用REST API的工作机制 #

这个代理是前端开发服务器（比如webpack-dev-server）提供的功能，具体流程如下：

1. 前端代码发起请求，比如fetch('/api/users')，请求首先发送到本地开发服务器（比如localhost:3000）。
2. 开发服务器判断请求的不是本地静态资源（比如JS、CSS文件），就按照proxy配置，把请求转发到http://localhost:5000。
3. 后端服务（5000端口）处理请求后，把响应返回给开发服务器。
4. 开发服务器再将响应转发回前端浏览器。

关键要注意：浏览器全程只和同源的开发服务器通信，不存在跨域问题；跨域的转发是在服务器层面完成的，而服务器之间的请求不受浏览器同源策略约束。

为什么配置后能直接调用API #

1. 同源限制被规避：浏览器请求的是本地开发服务器（和前端页面同源），不会触发跨域拦截；开发服务器作为中间层去和后端通信，服务器间的请求不受同源策略限制。
2. 路径自动拼接：开发服务器会自动把前端的相对路径请求（比如/api/xxx）和proxy地址拼接成完整的后端API地址（http://localhost:5000/api/xxx）发送给后端，所以前端不用手动写全路径。

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