在现代 Web 应用中，反向代理已经成为前后端分离架构中不可或缺的一部分。通过 Nginx 进行反向代理，前端可以访问位于不同路径或服务器上的后端服务。然而，在实际使用中，当前端和后端路径不一致时，可能会遇到 302 重定向 和 跨域路径问题，尤其是在路径和域名不同的情况下。

本文将详细介绍如何使用 Nginx 配置 proxy_redirect 和 proxy_cookie_path 指令来解决这些问题，并确保在反向代理过程中不会因为路径不一致导致跨域问题。

1、问题背景

假设：

• 前端服务的访问路径是 /api/sys。
• 后端服务的实际路径是 /sys。

在这种情况下，当前端访问 /api/sys 时，Nginx 会将请求代理到后端的 /sys 路径。但是，后台服务可能会返回 302 重定向，指向 /sys，这与前端的路径 /api/sys 不一致，从而可能引发跨域问题。

为了解决这个问题，我们需要确保：

1. 路径一致性：修改返回的 302 重定向 URL，使其符合前端的期望路径。
2. 跨域问题：确保返回的 Set-Cookie 头中的路径正确，避免跨域问题。

2、解决方案

1. 使用 proxy_redirect 修改重定向路径

proxy_redirect 指令用于修改后台服务返回的 Location 头，确保客户端始终重定向到前端期望的路径。它能够根据后台返回的绝对或相对 URL，自动修改路径和域名。

• 绝对 URL：当后台返回的重定向是完整的 URL 时（如 http://backend.com/sys ），我们可以将其修改为前端期望的路径（如 /api/sys）。
• 相对路径：如果后台返回的是相对路径（如 /sys），我们只需修改路径部分，而不需要修改域名。

2. 使用 proxy_cookie_path 修改 Cookie 路径

当后台服务返回 Set-Cookie 头时，通常会设置路径。如果后台服务设置了路径为 /sys 的 Cookie，我们可以通过 proxy_cookie_path 修改路径为 /api/sys，确保 Cookie 在前端能够正确生效。

3、Nginx 配置实现

根据不同的场景，我们可以灵活配置 NGINX 来处理 302 重定向和 Cookie 路径。

通过在 Nginx 配置中正确设置 proxy_redirect 和 proxy_cookie_path，我们可以确保路径的一致性，并避免跨域问题。以下是完整的 Nginx 配置示例：

配置示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

server {
    listen 80;

    location /api/sys {
        # 将请求代理到后端服务
        proxy_pass http://backend_server/sys;  # 后端服务地址

        # 确保传递正确的 Host 头
        proxy_set_header Host $http_host;  # $http_host 包含客户端请求的 Host 和端口号

        # 设置代理头，传递客户端的 IP、端口 和 协议
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        # 修改返回的 Location 头中的路径，将 /sys 替换为 /api/sys
        # 1. 如果后台返回绝对 URL，则修改域名和路径
        proxy_redirect http://backend.com/sys http://$http_host/api/sys;

        # 2. 如果后台返回相对路径，则仅修改路径
        proxy_redirect ^/sys /api/sys;

        # 修改 Set-Cookie 中的路径，将 /sys 替换为 /api/sys
        proxy_cookie_path /sys /api/sys;
    }
}

配置解析

1. proxy_pass http://backend_server/sys

   • 作用：该指令将前端的请求转发到后台服务，http://backend_server/sys 是后端服务的实际地址。
   • 原理：proxy_pass 将客户端请求的路径（如 /api/sys）映射到后台服务的路径（如 /sys）。

2. proxy_set_header Host $http_host

   • 作用：$http_host 包含了客户端请求的 主机名 和 端口号（如果有）。
   • 原理：在反向代理过程中，Host 头需要传递给后台服务，确保后台服务能够识别请求的域名和端口。$http_host 确保传递的是客户端请求中实际的 Host 头，而不是默认的服务器域名。

3. proxy_set_header X-Real-IP $remote_addr 和 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for

   • 作用：这些指令用于传递客户端的真实 IP 地址给后台服务。
   • 原理：$remote_addr 表示客户端的 IP 地址，而 $proxy_add_x_forwarded_for 会将客户端的 IP 地址添加到 X-Forwarded-For 头中。这对于日志记录和安全审计非常重要。

4. proxy_set_header X-Forwarded-Proto $scheme

   • 作用：该指令确保将客户端的协议（HTTP 或 HTTPS）传递给后台服务。
   • 原理：$scheme 获取请求的协议类型（HTTP 或 HTTPS），并将其传递给后台服务。这样，后台服务就能知道请求是通过 HTTP 还是 HTTPS 发起的。

5. proxy_redirect http://backend.com/sys http://$http_host/api/sys

   • 作用：如果后台返回的重定向是绝对 URL（如 http://backend.com/sys），则将其替换为 http://$http_host/api/sys。
   • 原理：proxy_redirect 通过正则表达式匹配返回的 Location 头，将域名和路径替换为符合前端请求的路径。这里的 $http_host 保证使用客户端请求的域名和端口。

6. proxy_redirect ^/sys /api/sys;

   • 作用：如果后台返回的是相对路径（如 /sys），则将其修改为 /api/sys。
   • 原理：proxy_redirect 指令支持正则匹配，^/sys 匹配所有以 /sys 开头的路径，将其替换为 /api/sys。如果前后端使用相同的域名和端口，这个配置就能保证路径一致性。

7. proxy_cookie_path /sys /api/sys

   • 作用：修改后台返回的 Set-Cookie 头中的路径，将 /sys 修改为 /api/sys，确保 Cookie 在前端路径下有效。
   • 原理：proxy_cookie_path 用于修改返回的 Cookie 路径。如果后台设置了路径为 /sys 的 Cookie，客户端就无法在 /api/sys 路径下访问这些 Cookie。通过 proxy_cookie_path 修改路径后，确保 Cookie 在正确的路径下有效。

总结

通过上述配置，我们可以确保：

1. 路径一致性：确保 302 重定向的 URL 与前端期望的路径一致。
2. 跨域问题：修改 Set-Cookie 路径，确保 Cookie 在前端正确生效。
3. 代理头设置：通过 proxy_set_header 传递客户端的真实信息（如 Host、X-Real-IP 和 X-Forwarded-Proto）。

这样配置的 Nginx 能够解决路径不一致、跨域问题和 302 重定向的问题，确保前后端服务的正常交互。

如果有任何问题，或者需要进一步讨论 Nginx 配置的细节，欢迎留言讨论！