Nginx：关于实现跨域代理

jcLee952024-07-09 11:22

运维专题 Nginx：关于实现跨域代理

【介绍】：本文讨论Nginx实现跨域代理相关话题。

目 录

  • [1. 概述](#1. 概述)
  • [2. 跨域资源共享（CORS）基本概念](#2. 跨域资源共享（CORS）基本概念)
    • [2.1 同源策略](#2.1 同源策略)
    • [2.2 跨域请求](#2.2 跨域请求)
    • [2.3 CORS工作原理](#2.3 CORS工作原理)
  • [3. Nginx跨域代理配置](#3. Nginx跨域代理配置)
    • [3.1 基本配置](#3.1 基本配置)
    • [3.2 处理预检请求（OPTIONS）](#3.2 处理预检请求（OPTIONS）)
    • [3.3 设置CORS头部](#3.3 设置CORS头部)
  • [4. 高级配置选项](#4. 高级配置选项)
    • [4.1 动态设置允许的源](#4.1 动态设置允许的源)
    • [4.2 处理凭证（Credentials）](#4.2 处理凭证（Credentials）)
    • [4.3 配置缓存控制](#4.3 配置缓存控制)
  • [5. 安全性考虑](#5. 安全性考虑)
    • [5.1 限制允许的源](#5.1 限制允许的源)
    • [5.2 控制暴露的头部](#5.2 控制暴露的头部)
    • [5.3 处理敏感数据](#5.3 处理敏感数据)
  • [6. 性能优化](#6. 性能优化)
    • [6.1 缓存CORS响应](#6.1 缓存CORS响应)
    • [6.2 减少预检请求](#6.2 减少预检请求)
    • [6.3 使用长连接](#6.3 使用长连接)
  • [7. 见问题和解决方案](#7. 见问题和解决方案)
    • [7.1 预检请求失败](#7.1 预检请求失败)
    • [7.2 凭证问题](#7.2 凭证问题)
    • [7.3 缓存相关问题](#7.3 缓存相关问题)
  • [8. 简单案例](#8. 简单案例)
  • [9. 总结](#9. 总结)
  • [F. 参考文献](#F. 参考文献)

[1. 概述](#1. 概述)

在现代Web 开发中，跨域资源共享（CORS ）是一个常见且重要的话题。随着Web 应用架构的不断演进，前后端分离已成为主流开发模式，这使得跨域请求变得越来越普遍。然而，出于安全考虑，浏览器默认实施了同源策略，限制了来自不同源的HTTP 请求。这就需要我们采取适当的措施来处理跨域问题，而Nginx 作为一个强大的Web服务器和反向代理工具，为我们提供了一种优雅的解决方案。

跨域资源共享本质上是一种基于HTTP 头的机制，它允许服务器声明哪些源站通过浏览器有权限访问加载其资源。CORS 的工作原理是添加新的HTTP 头，从而允许服务器描述允许哪些源站访问资源。对于需要除GET 、HEAD 和POST 之外的HTTP 方法的请求，CORS 还规定了一种预检机制，即在实际请求之前先发送一个OPTIONS请求，以确定实际请求是否可以安全发送。

尽管许多现代Web 框架和应用服务器都内置了CORS 支持，但在某些情况下，使用Nginx 来实现跨域代理可能更为合适。例如，当你需要为遗留系统添加CORS 支持，或者希望在应用服务器之前统一处理跨域请求时，Nginx 的反向代理功能就显得尤为有用。通过配置Nginx ，我们可以在不修改后端应用代码的情况下，轻松地为API 或静态资源添加CORS支持。

使用Nginx 实现跨域代理不仅可以解决跨域问题，还能带来其他好处。首先，它可以作为应用服务器的前置缓存，减轻后端压力。其次，Nginx 可以处理SSL 终止，提升整体性能。此外，通过Nginx 的配置，我们可以更精细地控制CORS策略，例如动态设置允许的源、处理复杂的预检请求、控制缓存行为等。

然而，实现跨域代理时也需要注意一些安全性问题。过于宽松的CORS策略可能会增加应用的攻击面，因此需要谨慎配置允许的源和方法。同时，对于包含敏感信息的请求，还需要考虑是否允许携带凭证。

在接下来的章节中，我们将深入探讨CORS 的基本概念，详细介绍如何使用Nginx 配置跨域代理，并讨论一些高级配置选项和最佳实践。通过本文，读者将能够全面理解Nginx实现跨域代理的原理和技巧，从而在实际项目中灵活应用这一解决方案。

[2. 跨域资源共享（CORS）基本概念](#2. 跨域资源共享（CORS）基本概念)

[2.1 同源策略](#2.1 同源策略)

同源策略是Web 应用安全的基石，它是浏览器实施的一种安全机制。根据这一策略，Web 浏览器只允许页面中的脚本访问来自同一来源的资源。这里的"同源"指的是相同的协议、域名和端口。例如，来自http://example.com/page.html的脚本只能访问http://example.com域名下的资源，而不能访问https://example.com或http://api.example.com等不同源的资源。

同源策略的主要目的是防止恶意脚本访问敏感数据。如果没有这种限制，恶意网站可能会通过脚本获取用户在其他网站上的私密信息，如银行账户详情或电子邮件内容。然而，随着Web应用变得越来越复杂，这种严格的限制也带来了一些挑战，特别是在需要跨域访问资源的场景中。

[2.2 跨域请求](#2.2 跨域请求)

跨域请求是指Web 页面向不同源的服务器请求资源。在现代Web开发中，跨域请求变得越来越普遍，主要原因包括：

  1. 前后端分离：随着单页应用（SPA ）的兴起，前端应用经常需要从不同域名的API服务器获取数据。

  2. 微服务架构：一个应用可能需要调用多个不同域名下的微服务API。

  3. 第三方服务集成：许多应用需要集成第三方服务，如支付网关、社交媒体API等。

  4. 内容分发网络（CDN ）：静态资源可能托管在不同的CDN域名下。

然而，由于同源策略的限制，这些跨域请求默认情况下是被浏览器阻止的。为了解决这个问题，CORS机制应运而生。

[2.3 CORS工作原理](#2.3 CORS工作原理)

跨域资源共享（CORS ）是一种基于HTTP 头的机制，它允许服务器声明哪些源站通过浏览器有权限访问加载其资源。CORS的工作原理主要涉及以下几个方面：

  1. 简单请求：对于一些简单的跨域请求（如GET 、HEAD 和部分POST 请求），浏览器会直接发送请求，并在请求头中添加Origin字段，标明请求的来源。服务器在响应中可以包含Access-Control-Allow-Origin头，指定允许访问的源。如果这个值与请求的Origin匹配或者为"*"，则浏览器允许该响应。

  2. 预检请求：对于可能对服务器数据产生副作用的请求（如PUT 、DELETE 等方法，或者包含特定头部的请求），浏览器会先发送一个OPTIONS 请求，称为"预检"请求。这个请求包含了实际请求的方法（在Access-Control-Request-Method头中）和特殊的头部（在Access-Control-Request-Headers头中）。服务器通过返回相应的CORS头部来指示是否允许实际请求。

  3. 凭证请求：对于需要发送凭证信息（如Cookie ）的请求，客户端需要设置withCredentials标志，服务器需要明确返回Access-Control-Allow-Credentials: true头部。此外，在这种情况下，Access-Control-Allow-Origin不能设置为"*"，必须指定具体的源。

  4. 响应头部：服务器可以通过各种CORS 相关的响应头部来控制跨域访问的细节，如Access-Control-Expose-Headers（指定哪些响应头可以被客户端访问）、Access-Control-Max-Age（指定预检请求的缓存时间）等。

通过正确配置这些CORS 头部，服务器可以精确控制哪些源站可以访问其资源，哪些HTTP 方法被允许，以及客户端可以发送哪些自定义头部。这样，CORS机制在保证安全性的同时，也为合法的跨域请求提供了便利。
在接下来的章节中，我们将详细介绍如何利用Nginx 的强大功能来实现和优化CORS配置，从而有效地解决跨域问题。

[3. Nginx跨域代理配置](#3. Nginx跨域代理配置)

Nginx 作为一个强大的Web 服务器和反向代理工具，为我们提供了灵活的方式来处理跨域资源共享（CORS ）问题。通过适当的配置，我们可以使用Nginx 来实现跨域代理，从而允许来自不同源的请求访问我们的资源。本节将详细介绍如何配置Nginx以实现跨域代理。

[3.1 基本配置](#3.1 基本配置)

要使用Nginx 实现跨域代理，我们首先需要设置一个基本的反向代理配置。这个配置将把来自客户端的请求转发到后端服务器，同时添加必要的CORS 头部。以下是一个基本的Nginx配置示例：

nginx 复制代码 
server {
    listen 80;
    server_name example.com;

    location /api/ {
        proxy_pass http://backend-server;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;

        # CORS配置
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
    }
}

在这个配置中，我们定义了一个监听80端口的服务器块。location /api/指令表示这个配置适用于所有以/api/开头的请求路径。proxy_pass指令指定了后端服务器的地址，Nginx会将请求转发到这个地址。

add_header指令用于添加CORS 相关的响应头。在这个例子中，我们允许来自任何源的请求（'*'），允许GET 、POST 和OPTIONS方法，并指定了允许的请求头和暴露的响应头。

[3.2 处理预检请求（OPTIONS）](#3.2 处理预检请求（OPTIONS）)

对于非简单请求，浏览器会先发送一个OPTIONS 请求作为预检请求。我们需要正确处理这些预检请求，以确保后续的实际请求能够顺利进行。以下是处理预检请求的Nginx配置示例：

nginx 复制代码 
server {
    listen 80;
    server_name example.com;

    location /api/ {
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            add_header 'Content-Length' 0;
            return 204;
        }

        proxy_pass http://backend-server;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;

        # 非OPTIONS请求的CORS配置
        add_header 'Access-Control-Allow-Origin' '*' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range' always;
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;
    }
}

在这个配置中，我们使用if指令来检查请求方法是否为OPTIONS 。如果是，我们直接在Nginx 层面处理这个预检请求，返回适当的CORS 头部，并使用return 204指令返回一个无内容的成功响应。

Access-Control-Max-Age头部指定了预检请求的结果可以被缓存的时间（以秒为单位）。在这个例子中，我们设置为1728000秒（20天），这可以减少预检请求的次数，提高性能。

[3.3 设置CORS头部](#3.3 设置CORS头部)

正确设置CORS 头部是实现跨域请求的关键。以下是一些常用的CORS头部及其作用：

  1. Access-Control-Allow-Origin：指定允许访问资源的源。可以设置为特定的源（如http://example.com）或通配符*（允许任何源）。

  2. Access-Control-Allow-Methods：指定允许的HTTP方法。

  3. Access-Control-Allow-Headers：指定允许的请求头。

  4. Access-Control-Expose-Headers：指定哪些响应头可以被客户端访问。

  5. Access-Control-Max-Age：指定预检请求的结果可以被缓存多长时间。

  6. Access-Control-Allow-Credentials：指定是否允许发送凭证（如Cookie）。

以下是一个更完整的Nginx 配置示例，展示了如何设置这些CORS头部：

nginx 复制代码 
server {
    listen 80;
    server_name example.com;

    location /api/ {
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '$http_origin';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT';
            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            add_header 'Content-Length' 0;
            return 204;
        }

        proxy_pass http://backend-server;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;

        # 非OPTIONS请求的CORS配置
        add_header 'Access-Control-Allow-Origin' '$http_origin' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT' always;
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization' always;
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;
        add_header 'Access-Control-Allow-Credentials' 'true' always;
    }
}

在这个配置中，我们使用$http_origin变量来动态设置Access-Control-Allow-Origin头部，这样可以允许多个特定的源，而不是使用通配符*。我们还添加了Access-Control-Allow-Credentials头部，并设置为'true'，允许携带凭证的请求。

通过这样的配置，Nginx 可以有效地处理跨域请求，无论是简单请求还是需要预检的复杂请求。这种方法的优势在于，我们可以在不修改后端应用代码的情况下，统一处理CORS问题，使得后端服务可以专注于业务逻辑的实现。

然而，需要注意的是，过于宽松的CORS配置可能会带来安全风险。在实际应用中，应该根据具体需求来设置允许的源、方法和头部，以确保只有受信任的源能够访问敏感资源。在下一节中，我们将探讨一些高级配置选项，以实现更精细的控制和更好的安全性。

[4. 高级配置选项](#4. 高级配置选项)

在基本的Nginx跨域代理配置之上，我们可以使用一些高级选项来实现更精细的控制和更好的安全性。本节将探讨三个重要的高级配置选项：动态设置允许的源、处理凭证以及配置缓存控制。

[4.1 动态设置允许的源](#4.1 动态设置允许的源)

实际应用中，我们可能需要根据不同的情况动态设置允许的源，而不是简单地使用通配符"*"或固定的域名。Nginx提供了灵活的配置选项，使我们能够实现这一需求。

一种常见的方法是使用Nginx 的变量来动态设置"Access-Control-Allow-Origin"头部。Nginx 提供了$http_origin变量，它包含了请求头中"Origin"字段的值。通过使用这个变量，我们可以根据实际请求的来源动态设置允许的源。

以下是一个示例配置：

nginx 复制代码 
server {
    listen 80；
    server_name example.com；

    location /api/ {
        set $cors_origin ""；
        if ($http_origin ~* (https?://.*\.example\.com(:[0-9]+)?$)) {
            set $cors_origin $http_origin；
        }

        add_header 'Access-Control-Allow-Origin' $cors_origin always；

        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Methods' 'GET，POST，OPTIONS' always；
            add_header 'Access-Control-Allow-Headers' 'DNT，User-Agent，X-Requested-With，If-Modified-Since，Cache-Control，Content-Type，Range' always；
            add_header 'Access-Control-Max-Age' 1728000 always；
            add_header 'Content-Type' 'text/plain charset=UTF-8' always；
            add_header 'Content-Length' 0 always；
            return 204；
        }

        proxy_pass http://backend-server；
        proxy_set_header Host $host；
        proxy_set_header X-Real-IP $remote_addr；
    }
}

在这个配置中，我们首先定义了一个变量$cors_origin并将其初始化为空字符串。然后，我们使用if指令和正则表达式来检查请求的"Origin"是否匹配我们允许的模式。在这个例子中，我们允许所有来自"example.com"子域的请求，包括可能的端口号。

如果"Origin"匹配我们的模式，我们就将$cors_origin设置为实际的"Origin"值。否则，它将保持为空字符串。

接下来，我们使用add_header指令来设置"Access-Control-Allow-Origin"头部，其值为$cors_origin。这样，只有匹配我们指定模式的源才会被允许，其他源的请求将不包含这个头部，从而被浏览器阻止。

这种方法的优点是它提供了更精细的控制，允许我们指定一组允许的源，而不是简单地允许所有源或仅允许单个源。同时，它还保持了配置的灵活性，因为我们可以轻松地修改正则表达式来调整允许的源。

使用这种方法时需要注意：

  • 首先，使用正则表达式进行匹配可能会对性能产生轻微影响，特别是在高并发情况下。因此，在选择使用这种方法时，需要权衡灵活性和性能。

  • 其次，这种配置方式可能会使Nginx配置文件变得更加复杂，增加维护难度。因此，建议在配置文件中添加详细的注释，解释正则表达式的含义和预期行为。

  • 最后，在使用这种动态设置方法时，我们需要特别注意安全性。确保正则表达式严格匹配预期的源，避免过于宽松的匹配可能导致的安全风险。

动态设置允许的源是一种强大的技术，能够在保证安全性的同时提供足够的灵活性。通过合理使用Nginx的变量和条件指令，我们可以实现精确的跨域资源共享控制，满足复杂的业务需求。

[4.2 处理凭证（Credentials）](#4.2 处理凭证（Credentials）)

某些跨域请求可能需要包含凭证，如Cookie 或HTTP 认证。为了支持这种请求，我们需要特别配置Nginx。

首先，我们需要设置Access-Control-Allow-Credentials头部为"true"。其次，当允许凭证时，Access-Control-Allow-Origin不能设置为"*"，必须指定具体的源。以下是一个处理凭证的配置示例：

nginx 复制代码 
server {
    listen 80;
    server_name api.example.com;

    location /api/ {
        if ($request_method = "OPTIONS") {
            add_header "Access-Control-Allow-Origin" $http_origin;
            add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS";
            add_header "Access-Control-Allow-Headers" "Authorization, Content-Type";
            add_header "Access-Control-Allow-Credentials" "true";
            add_header "Access-Control-Max-Age" 3600;
            add_header "Content-Type" "text/plain charset=UTF-8";
            add_header "Content-Length" 0;
            return 204;
        }

        proxy_pass http://backend_server;
        add_header "Access-Control-Allow-Origin" $http_origin always;
        add_header "Access-Control-Allow-Credentials" "true" always;
    }
}

在这个配置中，我们为所有响应添加了Access-Control-Allow-Credentials头部，并将其设置为"true"。同时，我们使用$http_origin变量来动态设置Access-Control-Allow-Origin头部，确保它总是指定具体的源。

[4.3 配置缓存控制](#4.3 配置缓存控制)

正确配置缓存可以显著提高跨域请求的性能。对于CORS 预检请求，我们可以使用Access-Control-Max-Age头部来控制预检请求结果的缓存时间。

此外，我们还可以使用Nginx 的缓存指令来缓存后端服务器的响应。以下是一个结合了CORS和响应缓存的配置示例：

nginx 复制代码 
http {
    proxy_cache_path /path/to/cache levels=1:2 keys_zone=my_cache:10m max_size=10g inactive=60m use_temp_path=off;

    server {
        listen 80;
        server_name api.example.com;

        location /api/ {
            if ($request_method = "OPTIONS") {
                add_header "Access-Control-Allow-Origin" $http_origin;
                add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS";
                add_header "Access-Control-Allow-Headers" "Authorization, Content-Type";
                add_header "Access-Control-Allow-Credentials" "true";
                add_header "Access-Control-Max-Age" 3600;
                add_header "Content-Type" "text/plain charset=UTF-8";
                add_header "Content-Length" 0;
                return 204;
            }

            proxy_pass http://backend_server;
            proxy_cache my_cache;
            proxy_cache_valid 200 60m;
            proxy_cache_use_stale error timeout http_500 http_502 http_503 http_504;

            add_header "Access-Control-Allow-Origin" $http_origin always;
            add_header "Access-Control-Allow-Credentials" "true" always;
        }
    }
}

在这个配置中，我们使用proxy_cache_path指令设置了一个名为my_cache的缓存区域。然后，在location块中，我们使用proxy_cache指令启用这个缓存，并用proxy_cache_valid指令指定对于HTTP 200响应缓存60分钟。

proxy_cache_use_stale指令允许在后端服务器出现错误或超时时使用过期的缓存内容，这可以提高服务的可用性。

通过这些高级配置选项，我们可以更精细地控制Nginx的跨域代理行为，提高安全性和性能。在实际应用中，应根据具体需求和场景来选择和调整这些配置。

[5. 安全性考虑](#5. 安全性考虑)

在使用Nginx 实现跨域代理时，安全性是一个至关重要的考虑因素。虽然跨域资源共享（CORS ）为现代Web 应用提供了便利，但如果配置不当，可能会导致严重的安全漏洞。本章将探讨在实施Nginx跨域代理时需要注意的几个关键安全问题。

[5.1 限制允许的源](#5.1 限制允许的源)

限制允许访问资源的源是CORS安全配置中最基本也是最重要的一步。通过精确控制哪些域名可以访问我们的资源，我们可以显著降低潜在的安全风险。

在Nginx 配置中，我们可以使用Access-Control-Allow-Origin头部来指定允许的源。然而，简单地将这个头部设置为通配符"*"是极其危险的，因为它允许来自任何源的请求。相反，我们应该明确列出允许的源。

例如，我们可以使用以下配置来限制允许的源：

nginx 复制代码 
server {
    listen 80；
    server_name api.example.com；

    location /api/ {
        set $cors_origin ""；
        if （$http_origin ~* （https?://（www|api|admin）\.example\.com）） {
            set $cors_origin $http_origin；
        }

        add_header "Access-Control-Allow-Origin" $cors_origin always；

        # 其他CORS和代理配置
        # ...
    }
}

在这个配置中，我们只允许来自www.example.com、api.example.com和admin.example.com的请求。对于其他源的请求，Access-Control-Allow-Origin头部将不会被设置，从而被浏览器拒绝。

此外，我们还应该定期审查和更新允许的源列表，确保它始终反映当前的业务需求和安全策略。

[5.2 控制暴露的头部](#5.2 控制暴露的头部)

除了限制允许的源，控制哪些响应头部可以被客户端访问也是一个重要的安全考虑。默认情况下，浏览器只允许客户端代码访问一小部分响应头部，如Cache-Control、Content-Language、Content-Type、Expires、Last-Modified和Pragma。

如果我们需要让客户端访问其他自定义头部，可以使用Access-Control-Expose-Headers头部来指定。然而，我们应该谨慎地选择暴露哪些头部，只暴露必要的信息。

以下是一个示例配置：

nginx 复制代码 
location /api/ {
    # 其他CORS配置
    # ...

    add_header "Access-Control-Expose-Headers" "X-My-Custom-Header，X-Another-Custom-Header" always；

    # 代理配置
    # ...
}

在这个配置中，我们只允许客户端访问X-My-Custom-Header和X-Another-Custom-Header这两个自定义头部，除此之外的非标准头部将不能被客户端代码访问。

[5.3 处理敏感数据](#5.3 处理敏感数据)

当涉及到处理敏感数据时，我们需要格外小心。虽然CORS可以限制哪些源可以访问我们的资源，但它并不能保护数据在传输过程中的安全。

首先，对于包含敏感信息的请求，我们应该始终使用HTTPS 。Nginx 可以配置为处理SSL/TLS 终止，从而确保所有通信都是加密的。以下是一个基本的HTTPS配置示例：

nginx 复制代码 
server {
    listen 443 ssl；
    server_name api.example.com；

    ssl_certificate /path/to/certificate.crt；
    ssl_certificate_key /path/to/certificate.key；

    # 其他SSL配置
    # ...

    location /api/ {
        # CORS和代理配置
        # ...
    }
}

其次，对于特别敏感的操作，我们应该实施额外的身份验证和授权措施。这可能包括使用JSON Web Tokens （JWT ）、OAuth 或其他身份验证机制。虽然这些通常在应用程序层面实现，但Nginx可以配置为检查某些头部或执行基本的身份验证。

最后，我们应该注意不要在URL 中包含敏感信息。即使使用HTTPS ，URL也可能被记录在服务器日志、浏览器历史或其他地方。相反，敏感数据应该在请求体中传输。

在处理包含敏感信息的跨域请求时，我们还需要特别注意Access-Control-Allow-Credentials头部的使用。当这个头部设置为"true"时，它允许跨域请求包含凭证信息（如Cookie ）。这在某些情况下是必要的，但也增加了安全风险。如果启用了凭证，我们必须确保Access-Control-Allow-Origin头部指定了精确的源，而不是通配符"*"。

nginx 复制代码 
location /api/ {
    # 其他CORS配置
    # ...

    add_header "Access-Control-Allow-Credentials" "true" always；
    add_header "Access-Control-Allow-Origin" $cors_origin always；

    # 代理配置
    # ...
}

通过仔细考虑这些安全因素，并在Nginx配置中实施适当的措施，我们可以在享受跨域资源共享带来的便利的同时，也能维护应用程序的安全性。然而，安全是一个持续的过程，我们需要定期审查和更新我们的安全策略，以应对不断变化的威胁景观。

[6. 性能优化](#6. 性能优化)

在使用Nginx 实现跨域代理时，性能优化是一个不容忽视的重要方面。良好的性能不仅能提高用户体验，还能降低服务器负载，节省资源。本节将探讨三个主要的性能优化策略：缓存CORS响应、减少预检请求以及使用长连接。

[6.1 缓存CORS响应](#6.1 缓存CORS响应)

缓存CORS响应是提高跨域请求性能的有效方法。通过适当的缓存策略，我们可以减少不必要的网络请求，从而降低延迟并提高响应速度。

在Nginx 中，我们可以使用proxy_cache指令来实现响应缓存。以下是一个基本的缓存配置示例：

nginx 复制代码 
http {
    proxy_cache_path /path/to/cache levels=1：2 keys_zone=my_cache：10m max_size=10g inactive=60m use_temp_path=off；

    server {
        listen 80；
        server_name api.example.com；

        location /api/ {
            proxy_cache my_cache；
            proxy_cache_valid 200 60m；
            proxy_cache_use_stale error timeout http_500 http_502 http_503 http_504；

            proxy_pass http：//backend_server；

            # CORS配置
            add_header "Access-Control-Allow-Origin" $http_origin always；
            add_header "Access-Control-Allow-Methods" "GET，POST，OPTIONS" always；
            add_header "Access-Control-Allow-Headers" "Origin，Authorization，Content-Type" always；
        }
    }
}

在这个配置中，我们首先使用proxy_cache_path指令定义了一个名为my_cache的缓存区域。然后，在location块中，我们使用proxy_cache指令启用这个缓存，并用proxy_cache_valid指令指定对于HTTP 200响应缓存60分钟。

proxy_cache_use_stale指令允许在后端服务器出现错误或超时时使用过期的缓存内容，这可以提高服务的可用性。

需要注意的是，在缓存CORS 响应时，我们应该确保缓存的响应包含正确的CORS 头部。在上面的配置中，我们使用add_header指令在每个响应中添加了必要的CORS头部。

[6.2 减少预检请求](#6.2 减少预检请求)

预检请求（OPTIONS 请求）是CORS机制中的一个重要部分，但过多的预检请求可能会影响性能。我们可以通过以下两种方式来减少预检请求：

  1. 增加预检请求的缓存时间：通过设置Access-Control-Max-Age头部，我们可以指定预检请求的结果可以被缓存多长时间，从而减少重复的预检请求。

  2. 尽可能使用简单请求：简单请求不需要预检。简单请求的条件包括：使用GET 、HEAD 或POST 方法，不设置自定义头部，Content-Type 限于application/x-www-form-urlencoded、multipart/form-data或text/plain。

以下是一个配置示例，展示了如何增加预检请求的缓存时间：

nginx 复制代码 
server {
    listen 80；
    server_name api.example.com；

    location /api/ {
        if （$request_method = "OPTIONS"） {
            add_header "Access-Control-Allow-Origin" $http_origin；
            add_header "Access-Control-Allow-Methods" "GET，POST，OPTIONS"；
            add_header "Access-Control-Allow-Headers" "Origin，Authorization，Content-Type"；
            add_header "Access-Control-Max-Age" 3600；
            add_header "Content-Type" "text/plain charset=UTF-8"；
            add_header "Content-Length" 0；
            return 204；
        }

        proxy_pass http：//backend_server；

        # 其他CORS配置
        # ...
    }
}

在这个配置中，我们将Access-Control-Max-Age设置为3600秒（1小时），这意味着浏览器可以缓存预检请求的结果1小时，在这期间不需要发送新的预检请求。

[6.3 使用长连接](#6.3 使用长连接)

使用长连接（HTTP 持久连接）可以显著提高性能，特别是在处理大量小型请求时。长连接允许在单个TCP 连接上发送多个HTTP请求，避免了频繁建立和关闭连接的开销。

在Nginx中，我们可以通过以下配置来启用和优化长连接：

nginx 复制代码 
http {
    upstream backend {
        server backend1.example.com：8080；
        server backend2.example.com：8080；
        keepalive 32；
    }

    server {
        listen 80；
        server_name api.example.com；

        location /api/ {
            proxy_pass http：//backend；
            proxy_http_version 1.1；
            proxy_set_header Connection ""；

            # CORS配置
            add_header "Access-Control-Allow-Origin" $http_origin always；
            add_header "Access-Control-Allow-Methods" "GET，POST，OPTIONS" always；
            add_header "Access-Control-Allow-Headers" "Origin，Authorization，Content-Type" always；
        }
    }
}

在这个配置中，我们在upstream块中使用keepalive指令来设置空闲的长连接数量。在location块中，我们使用proxy_http_version指令将HTTP 版本设置为1.1，并使用proxy_set_header Connection ""来清除"Connection"头部，这两个设置都是启用长连接所必需的。

通过实施这些性能优化策略，我们可以显著提高Nginx跨域代理的效率和响应速度。
性能优化是一个持续的过程，我们应该根据实际的使用情况和负载测试结果来不断调整和优化配置。同时，在追求性能的同时，我们也不应忽视安全性和可维护性等其他重要因素。

[7. 见问题和解决方案](#7. 见问题和解决方案)

在使用Nginx实现跨域代理时，我们可能会遇到各种问题。本节将讨论三个最常见的问题：预检请求失败、凭证问题以及缓存相关问题，并提供相应的解决方案。

[7.1 预检请求失败](#7.1 预检请求失败)

预检请求失败是CORS 实现中最常见的问题之一。当浏览器发送OPTIONS请求进行预检时，如果没有收到正确的响应，就会阻止后续的实际请求。这个问题通常有以下几个原因：

首先，Nginx 配置中可能没有正确处理OPTIONS 请求。解决这个问题的方法是在Nginx 配置中添加对OPTIONS请求的特殊处理。例如：

nginx 复制代码 
server {
    listen 80；
    server_name api.example.com；

    location /api/ {
        if （$request_method = "OPTIONS"） {
            add_header "Access-Control-Allow-Origin" $http_origin；
            add_header "Access-Control-Allow-Methods" "GET，POST，OPTIONS"；
            add_header "Access-Control-Allow-Headers" "Authorization，Content-Type"；
            add_header "Access-Control-Max-Age" 3600；
            add_header "Content-Type" "text/plain charset=UTF-8"；
            add_header "Content-Length" 0；
            return 204；
        }

        # 其他配置...
    }
}

其次，Access-Control-Allow-Origin 头部可能设置不正确。如果这个头部的值不匹配请求的源，浏览器也会阻止请求。解决方法是确保Access-Control-Allow-Origin头部包含正确的源，或者使用动态设置：

nginx 复制代码 
set $cors_origin ""；
if （$http_origin ~* （https?://.*\.example\.com）） {
    set $cors_origin $http_origin；
}
add_header "Access-Control-Allow-Origin" $cors_origin always；

最后，如果预检请求中包含自定义头部，但Access-Control-Allow-Headers 没有包含这些头部，预检请求也会失败。解决方法是在Access-Control-Allow-Headers中包含所有必要的头部：

nginx 复制代码 
add_header "Access-Control-Allow-Headers" "Authorization，Content-Type，X-Custom-Header" always；

[7.2 凭证问题](#7.2 凭证问题)

当跨域请求需要包含凭证（如Cookie ）时，我们可能会遇到问题。这通常是因为CORS配置不正确导致的。

首先，确保在客户端代码中设置了withCredentials为true。例如，使用XMLHttpRequest：

javascript 复制代码 
var xhr = new XMLHttpRequest()；
xhr.withCredentials = true；

或者使用Fetch API：

javascript 复制代码 
fetch（url，{
    credentials："include"
}）；

然后，在Nginx 配置中，我们需要设置Access-Control-Allow-Credentials头部为"true"：

nginx 复制代码 
add_header "Access-Control-Allow-Credentials" "true" always；

同时，当允许凭证时，Access-Control-Allow-Origin不能设置为"*"，必须指定具体的源：

nginx 复制代码 
add_header "Access-Control-Allow-Origin" $http_origin always；

最后，确保后端服务器也正确处理了包含凭证的请求。

[7.3 缓存相关问题](#7.3 缓存相关问题)

缓存虽然可以提高性能，但如果配置不当，也可能导致问题。一个常见的问题是缓存了错误的CORS头部，导致后续请求失败。

为了避免这个问题，我们可以在Nginx 配置中使用add_header指令的always参数，确保即使是缓存的响应也包含正确的CORS头部：

nginx 复制代码 
add_header "Access-Control-Allow-Origin" $http_origin always；
add_header "Access-Control-Allow-Methods" "GET，POST，OPTIONS" always；
add_header "Access-Control-Allow-Headers" "Authorization，Content-Type" always；

另一个问题是预检请求的结果被过度缓存，导致CORS 策略更新后不能及时生效。解决这个问题的方法是合理设置Access-Control-Max-Age头部：

nginx 复制代码 
add_header "Access-Control-Max-Age" 3600；

这里将预检请求的缓存时间设置为1小时。根据实际需求，可以调整这个值。

最后，对于动态内容，我们可能需要禁用缓存以确保获取到最新的数据。这可以通过设置适当的缓存控制头部来实现：

nginx 复制代码 
add_header "Cache-Control" "no-store，no-cache，must-revalidate，proxy-revalidate，max-age=0" always；

[8. 简单案例](#8. 简单案例)

这里我们将通过一个小案例来展示如何使用Nginx实现跨域代理。这个案例将涵盖前面章节中讨论的多个重要概念，包括基本配置、安全性考虑和性能优化。

假设我们有一个前端应用托管在www.example.com，而后端API 服务运行在api.example.com。我们的目标是使用Nginx 作为反向代理，允许前端应用跨域访问后端API。

首先，让我们看一下Nginx配置文件：

nginx 复制代码 
http {
    # 定义上游服务器
    upstream backend_api {
        server api.example.com：8080；
        keepalive 32；
    }

    # 缓存配置
    proxy_cache_path /path/to/cache levels=1：2 keys_zone=api_cache：10m max_size=10g inactive=60m use_temp_path=off；

    server {
        listen 80；
        server_name www.example.com；

        location / {
            root /var/www/html；
            index index.html；
        }

        location /api/ {
            # 预检请求处理
            if （$request_method = "OPTIONS"） {
                add_header "Access-Control-Allow-Origin" $http_origin；
                add_header "Access-Control-Allow-Methods" "GET，POST，PUT，DELETE，OPTIONS"；
                add_header "Access-Control-Allow-Headers" "Authorization，Content-Type，X-Requested-With"；
                add_header "Access-Control-Max-Age" 3600；
                add_header "Content-Type" "text/plain charset=UTF-8"；
                add_header "Content-Length" 0；
                return 204；
            }

            # 代理到后端API
            proxy_pass http：//backend_api；
            proxy_http_version 1.1；
            proxy_set_header Connection ""；

            # CORS头部设置
            add_header "Access-Control-Allow-Origin" $http_origin always；
            add_header "Access-Control-Allow-Credentials" "true" always；

            # 缓存配置
            proxy_cache api_cache；
            proxy_cache_valid 200 60m；
            proxy_cache_use_stale error timeout http_500 http_502 http_503 http_504；

            # 安全头部
            add_header X-Frame-Options "DENY" always；
            add_header X-Content-Type-Options "nosniff" always；
            add_header X-XSS-Protection "1； mode=block" always；

            # 日志配置
            access_log /var/log/nginx/api_access.log combined；
            error_log /var/log/nginx/api_error.log error；
        }
    }
}

现在，让我们逐步解析这个配置：

  • 首先，我们定义了一个名为backend_api的上游服务器组，指向我们的后端API 服务器。使用keepalive指令保持32个空闲的长连接，这有助于提高性能。

  • 接下来，我们配置了一个缓存区域，用于缓存API响应。这可以显著减少后端服务器的负载并提高响应速度。

​ 在服务器块中，我们首先处理根路径，将其指向静态文件目录。这里托管了我们的前端应用。

​ /api/路径的配置是本例的核心。首先，我们处理预检请求。当收到OPTIONS 请求时，我们返回必要的CORS 头部，并设置Access-Control-Max-Age为3600秒，以减少预检请求的频率。

​ 对于非OPTIONS 请求，我们将其代理到后端API 服务器。我们使用HTTP/1.1并设置空的"Connection"头部以启用长连接。

​ 我们动态设置Access-Control-Allow-Origin头部，使用$http_origin变量来匹配请求的源。这比使用通配符"*"更安全。我们还设置了Access-Control-Allow-Credentials为"true"，允许跨域请求包含凭证。

​ 缓存配置使用了前面定义的缓存区域，缓存成功响应60分钟，并在后端服务器出错时使用过期缓存。

  • 最后，我们添加了一些安全头部，如X-Frame-Options、X-Content-Type-Options和X-XSS-Protection，以增强安全性。我们还配置了访问日志和错误日志，便于问题排查。

这个配置示例展示了如何在实际环境中应用本文讨论的各种概念和技术。它不仅解决了跨域问题，还考虑了性能优化和安全性。在实际应用中，可能需要根据具体需求进行调整，例如添加SSL/TLS配置、调整缓存策略或增加更多的安全措施。

[9. 总结](#9. 总结)

本文深入探讨了使用Nginx 实现跨域代理的方法和技巧。我们从跨域资源共享（CORS ）的基本概念出发，详细介绍了Nginx的基本配置、高级选项、安全性考虑和性能优化策略。通过实践案例，我们展示了如何将这些知识应用到实际环境中，解决跨域问题的同时兼顾性能和安全性。

最后，希望本文对你有所帮助。

[F. 参考文献](#F. 参考文献)

主题 参考文献
Nginx 官方文档 https://nginx.org/en/docs/
CORS 概念 https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
CORS 规范 (RFC) https://www.rfc-editor.org/rfc/rfc6454
Nginx 反向代理配置 https://nginx.org/en/docs/http/ngx_http_proxy_module.html
Nginx 缓存配置 https://nginx.org/en/docs/http/ngx_http_proxy_module.html#proxy_cache
HTTP 安全头部 https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
Nginx 变量 https://nginx.org/en/docs/varindex.html
HTTP/1.1 规范 (RFC) https://www.rfc-editor.org/rfc/rfc7230
TLS 配置 https://nginx.org/en/docs/http/configuring_https_servers.html
Nginx 日志配置 https://nginx.org/en/docs/http/ngx_http_log_module.html
HTTP 缓存控制 https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
CORS 预检请求 https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request
Nginx 性能优化 https://www.nginx.com/blog/tuning-nginx/
Web 安全最佳实践 https://cheatsheetseries.owasp.org/cheatsheets/REST_Security_Cheat_Sheet.html
相关推荐
dessler23 分钟前
Docker-如何启动docker
运维·docker·云原生·容器·eureka
zhy2956323 分钟前
【DOCKER】基于DOCKER的服务之DUFS
运维·docker·容器·dufs
秋名山小桃子38 分钟前
Kunlun 2280服务器(ARM)Raid卡磁盘盘符漂移问题解决
运维·服务器
与君共勉1213838 分钟前
Nginx 负载均衡的实现
运维·服务器·nginx·负载均衡
MZWeiei1 小时前
Zookeeper基本命令解析
大数据·linux·运维·服务器·zookeeper
Arenaschi1 小时前
在Tomcat中部署应用时，如何通过域名访问而不加端口号
运维·服务器
waicsdn_haha1 小时前
Java/JDK下载、安装及环境配置超详细教程【Windows10、macOS和Linux图文详解】
java·运维·服务器·开发语言·windows·后端·jdk
okok__TXF1 小时前
Nginx + Lua脚本打配合
nginx·lua
青灯文案12 小时前
前端 HTTP 请求由 Nginx 反向代理和 API 网关到后端服务的流程
前端·nginx·http
蜜獾云2 小时前
docker 安装雷池WAF防火墙 守护Web服务器
linux·运维·服务器·网络·网络安全·docker·容器
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04解决java读取EXCEL数据变成科学计数法的问题05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问07DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明106个主流的工业3D管道设计软件