正向代理、反向代理
约 863 字大约 3 分钟
2025-03-11
总结
多数情况下,我们推荐使用代理。
本地开发环境使用正向代理,部署到服务器生产环境使用反向代理。
不推荐手动处理,手动处理可能涉及到重新走一遍版本发布流程。比较费时间
跨域请求是指在浏览器中,从一个域名的网页去请求另一个域名的资源。跨域请求是受到浏览器的同源策略(Same Origin Policy)限制的,该策略要求浏览器只能发送同源(协议、域名、端口号相同)的请求。
一般在 Node.js 中解决这类跨域问题,有以下三个思路:
一、正向代理
正向代理就是通过配置 proxy,实现请求被代理转发
正向代理指的是在客户端架设代理,该代理和客户端同域名同端口,属于同源。而代理和服务端之间不存在同源策略限制,即不存在跨域问题。大多数情况下,我们会使用中间件proxy
、http-proxy-middleware
来架设代理,同时在代码中将接口的请求地址改为该代理的地址和端口来帮我们解决这个问题。
有些前端工程内置了一些 proxy 配置,我们可以启动该配置来
一般来说主要用两种情况:
- 前端工程代码:未编译的前端代码直接通过
npm run env
命令直接在服务器上启动,代理直接运行在该服务上。 - 静态资源代码:指的是编译后的静态代码或者非工程代码,使用
app.use(express.static(path.join(__dirname, 'public')))
托管运行
二、反向代理
反向代理实质就是反向代理服务器在响应头里添加 CORS 信息
反向代理是指以代理服务器来接收客户端的请求,然后将请求转发给内部网络上的服务器,将从服务器上得到的结果返回给客户端,此时代理服务器对外表现为一个反向代理服务器。对于客户端来说,反向代理就相当于目标服务器,只需要将反向代理当作目标服务器一样发送请求就可以了,并且客户端不需要进行任何设置。一般我们会在服务端给接口的响应头配置CORS
信息。
主要分为这几种情况:
- 代理服务器:比如我们可以通过配置
Nginx
服务服务器,自动的给接口的响应报文添加CORS
信息 - Node.js:我们可以在响应报文里手动添加,也可以应用一些中间件如
CORS
来处理。 - 其他:比如 java 的
apache服务器
大多数情况下,我们推荐使用Nginx
和Node.js中间件
来解决
三、手动处理 不推荐
手动处理指的是:在后端代码的响应报文里手动后添加 CORS 信息,但是一般不推荐这样做,因为修改可能涉及到重新编译代码,重新部署。
在接口的响应报文 HttpServletResponse
对象里手动添加 CORS 信息。
以Java
为例子:
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setHeader("Access-Control-Allow-Origin", "http://foo.example");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS");
response.setHeader("Access-Control-Allow-Headers", "X-PINGOTHER, Content-Type");
}
更新日志
e7112
-1于