解决 Cloudflare 导致的 CORS 跨域问题

在现代 Web 开发中，跨源资源共享（CORS）是一个常见的问题，尤其是当使用 Cloudflare 作为 CDN 时。本文将分享如何通过 Nginx 配置和 Cloudflare 策略解决 CORS 跨域问题的经验。

CORS 问题的背景

CORS 是一种安全特性，防止恶意网站访问用户在其他网站上的数据。在某些情况下，使用 Cloudflare 会导致 CORS 策略的冲突，即使服务器已经正确配置了相关响应头。

Nginx 配置

在 Nginx 中，我们可以通过设置响应头来解决 CORS 问题。以下是我在 Nginx 配置中使用的示例：

location / {
    proxy_pass http://xxxxxx;
    # 处理预检请求
    add_header 'Access-Control-Allow-Origin' "http_origin";
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type, Accept, Origin, User-Agent, DNT, Cache-Control, X-Mx-ReqToken';
    add_header 'Content-Length' 0;
    add_header 'Content-Type' 'text/plain; charset=UTF-8';
    return 206;
}

# 允许所有来源的跨域请求
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';

关键配置说明

Access-Control-Allow-Origin: 允许的来源，确保正确配置以防止多个值。
Access-Control-Allow-Credentials: 设置为 true，允许客户端发送凭据（如 cookies）。
Access-Control-Allow-Methods: 指定支持的 HTTP 方法。
Access-Control-Allow-Headers: 指定允许的请求头。

Cloudflare 策略的影响

尽管 Nginx 已经配置正确，CORS 问题仍然存在。这时候需要检查 Cloudflare 的设置。通过调整 Cloudflare 的策略，我最终解决了问题。以下是相关的设置步骤：

修改 Cloudflare 设置

登录 Cloudflare 控制面板。
找到你的域名，并进入“防火墙”或“页面规则”设置。
确保没有阻止 CORS 的规则，并允许 Access-Control-Allow-Credentials。

2024-11-01T01:24:52.png

响应头对比

在修改 Cloudflare 策略之前和之后，我对比了两次的响应头。以下是主要差异，特别是在 Access-Control-Allow-Credentials 参数的开放状态。
在修改之后，Access-Control-Allow-Credentials 的值变为 true，这解决了跨域问题。
响应头差异如下图:
2024-11-01T01:26:31.png