iOS Safari下HTTP/3引发XHR请求超时或网络错误的解决问询

核心原因 #

你的Nginx 1.22.0不支持HTTP/3，但iOS Safari（16.2版本）会主动尝试使用HTTP/3发起请求，服务器对HTTP/3请求处理异常（返回000/500状态码），且Safari的HTTP/3回退机制存在兼容性问题，导致请求无法自动切换到HTTP/2，最终出现登录失败。

针对你的疑问逐一解答 #

1. 如何让Safari使用HTTP/2？ #

通过Nginx配置明确告知浏览器服务器不支持HTTP/3，并确保HTTP/2正常开启：

• 先确认Nginx已启用HTTP/2模块（执行nginx -V查看是否包含--with-http_v2_module）；
• 在server块的listen指令中添加http2；
• 通过Alt-Svc响应头只声明HTTP/2和HTTP/1.1为可用协议，禁止HTTP/3。

2. HTTP/3请求失败为何未自动回退到HTTP/2？ #

Safari的HTTP/3回退逻辑存在版本兼容性问题，当服务器未明确拒绝HTTP/3（仅返回异常状态码）时，Safari无法正确识别请求失败原因，不会触发自动回退。而Nginx不支持HTTP/3时，无法返回标准的HTTP/3错误响应，进一步导致回退机制失效。

3. 是否Axios未正确处理HTTP/3预检请求导致超时？ #

不是。预检OPTIONS请求是浏览器自动发起的，和Axios逻辑无关。Axios只是捕获了浏览器发起HTTP/3请求失败后的错误状态，问题根源在服务器对HTTP/3请求的不支持，以及Safari的协议协商逻辑。

4. 为何其他浏览器无此问题？ #

其他主流浏览器（如Chrome、Firefox）要么默认未启用HTTP/3，要么回退机制更完善，检测到服务器不支持HTTP/3时会自动切换到HTTP/2。而iOS Safari 16.x版本主动启用了HTTP/3，且回退逻辑存在缺陷，才会出现独有的问题。

具体解决方案（Nginx配置） #

修改API服务器Nginx配置，确保HTTP/2开启，并通过Alt-Svc头禁用HTTP/3：

server {
    listen 443 ssl http2; # 开启HTTP/2支持
    server_name api.example.com;

    # SSL证书配置（替换为你的证书路径）
    ssl_certificate /path/to/your/cert.pem;
    ssl_certificate_key /path/to/your/key.pem;

    # 关键：告知浏览器仅支持HTTP/2和HTTP/1.1
    add_header Alt-Svc 'h2=":443"; ma=31536000, h1=":443"; ma=31536000';

    # 优化CORS配置（保留你之前的max-age设置）
    add_header Access-Control-Allow-Origin https://admin.example.com;
    add_header Access-Control-Allow-Methods GET, POST, OPTIONS;
    add_header Access-Control-Allow-Headers Content-Type;
    add_header Access-Control-Max-Age 86400;

    # 直接响应OPTIONS预检请求，避免不必要的代理
    if ($request_method = OPTIONS) {
        return 204;
    }

    # 代理到后端API服务
    location / {
        proxy_pass http://your_backend_server;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

配置验证 #

1. 重启Nginx：sudo nginx -s reload；
2. 用Safari打开应用，查看开发者工具的响应头，确认Alt-Svc字段无h3相关声明；
3. 查看网络请求的协议列，确认请求使用HTTP/2而非HTTP/3。

客户端代码无需修改 #

你的Axios代码逻辑正常，错误处理也能正确捕获请求异常。问题核心在服务器与浏览器的协议协商，不需要修改前端代码。

内容的提问来源于stack exchange，提问作者Amr El Aswar