nginx http2 导致safari浏览器XMLHttpRequest cannot load错误

环境说明

nginx: 1.22.0

safari: 13+

curl: 7.68.0

ubuntu:20.04

问题说明

[Error] The network connection was lost.
[Error] XMLHttpRequest cannot load xxx due to access control checks.
[Error] i {message: "Network Error", name: "AxiosError", code: "ERR_NETWORK", config: Object, request: XMLHttpRequest, …}
 (anonymous function) (main.3728746c.js:2:1402731)
 c (main.3728746c.js:2:447796)
 (anonymous function) (main.3728746c.js:2:447546)
 fe (main.3728746c.js:2:444794)
 l (main.3728746c.js:2:445037)
 promiseReactionJob
[Error] Failed to load resource: The network connection was lost. (sms, line 0)

curl命令测试

http2.0

curl -v 'https://xxx' \
  -X 'OPTIONS' \
  -H 'authority: xxx' \
  -H 'accept: */*' \
  -H 'accept-language: zh,en;q=0.9' \
  -H 'access-control-request-headers: appid,authorization,content-type,v,version' \
  -H 'access-control-request-method: POST' \
  -H 'origin: https://xxx' \
  -H 'referer: https://xxx/' \
  -H 'sec-fetch-dest: empty' \
  -H 'sec-fetch-mode: cors' \
  -H 'sec-fetch-site: same-site' \
  -H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36' \
  --compressed
*   Trying xxx:443...
* Connected to xxx (106.75.36.177) port 443 (#0)
* ALPN: offers h2
* ALPN: offers http/1.1
*  CAfile: /etc/ssl/cert.pem
*  CApath: none
* (304) (OUT), TLS handshake, Client hello (1):
* (304) (IN), TLS handshake, Server hello (2):
* TLSv1.2 (IN), TLS handshake, Certificate (11):
* TLSv1.2 (IN), TLS handshake, Server key exchange (12):
* TLSv1.2 (IN), TLS handshake, Server finished (14):
* TLSv1.2 (OUT), TLS handshake, Client key exchange (16):
* TLSv1.2 (OUT), TLS change cipher, Change cipher spec (1):
* TLSv1.2 (OUT), TLS handshake, Finished (20):
* TLSv1.2 (IN), TLS change cipher, Change cipher spec (1):
* TLSv1.2 (IN), TLS handshake, Finished (20):
* SSL connection using TLSv1.2 / ECDHE-RSA-AES128-GCM-SHA256
* ALPN: server accepted h2
* Server certificate:
*  subject: CN=*.xxx
*  start date: Aug  2 00:00:00 2022 GMT
*  expire date: Aug 29 23:59:59 2023 GMT
*  subjectAltName: host "xxx" matched cert's "*.xxx"
*  issuer: C=CN; O=TrustAsia Technologies, Inc.; OU=Domain Validated SSL; CN=TrustAsia TLS RSA CA
*  SSL certificate verify ok.
* Using HTTP2, server supports multiplexing
* Copying HTTP/2 data in stream buffer to connection buffer after upgrade: len=0
* h2h3 [:method: OPTIONS]
* h2h3 [:path: /base/send/sms]
* h2h3 [:scheme: https]
* h2h3 [:authority: xxx]
* h2h3 [accept-encoding: deflate, gzip]
* h2h3 [authority: xxx]
* h2h3 [accept: */*]
* h2h3 [accept-language: zh,en;q=0.9]
* h2h3 [access-control-request-headers: appid,authorization,content-type,v,version]
* h2h3 [access-control-request-method: POST]
* h2h3 [origin: https://xxx]
* h2h3 [referer: https://xxx/]
* h2h3 [sec-fetch-dest: empty]
* h2h3 [sec-fetch-mode: cors]
* h2h3 [sec-fetch-site: same-site]
* h2h3 [user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36]
* Using Stream ID: 1 (easy handle 0x7facba00bc00)
> OPTIONS /base/send/sms HTTP/2
> Host: xxx
> accept-encoding: deflate, gzip
> authority: xxx
> accept: */*
> accept-language: zh,en;q=0.9
> access-control-request-headers: appid,authorization,content-type,v,version
> access-control-request-method: POST
> origin: https://xxx
> referer: https://xxx/
> sec-fetch-dest: empty
> sec-fetch-mode: cors
> sec-fetch-site: same-site
> user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36
>
* Connection state changed (MAX_CONCURRENT_STREAMS == 128)!
* HTTP/2 stream 0 was not closed cleanly: PROTOCOL_ERROR (err 1)
* Connection #0 to host xxx left intact
curl: (92) HTTP/2 stream 0 was not closed cleanly: PROTOCOL_ERROR (err 1)

http1.1

# curl --http1.1 'https://xxx/base/send/sms'   -X 'OPTIONS'   -H 'authority: xxx'   -H 'accept: */*'   -H 'accept-language: zh,en;q=0.9'   -H 'access-control-request-headers: appid,authorization,content-type,v,version'   -H 'access-control-request-method: POST'   -H 'origin: https://xxx'   -H 'referer: https://xxx/'   -H 'sec-fetch-dest: empty'   -H 'sec-fetch-mode: cors'   -H 'sec-fetch-site: same-site'   -H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36'   --compressed -v
*   Trying 106.75.36.177:443...
* TCP_NODELAY set
* Connected to xxx port 443 (#0)
* ALPN, offering h2
* ALPN, offering http/1.1
* successfully set certificate verify locations:
*   CAfile: /etc/ssl/certs/ca-certificates.crt
  CApath: /etc/ssl/certs
* TLSv1.3 (OUT), TLS handshake, Client hello (1):
* TLSv1.3 (IN), TLS handshake, Server hello (2):
* TLSv1.2 (IN), TLS handshake, Certificate (11):
* TLSv1.2 (IN), TLS handshake, Server key exchange (12):
* TLSv1.2 (IN), TLS handshake, Server finished (14):
* TLSv1.2 (OUT), TLS handshake, Client key exchange (16):
* TLSv1.2 (OUT), TLS change cipher, Change cipher spec (1):
* TLSv1.2 (OUT), TLS handshake, Finished (20):
* TLSv1.2 (IN), TLS handshake, Finished (20):
* SSL connection using TLSv1.2 / ECDHE-RSA-AES128-GCM-SHA256
* ALPN, server accepted to use http/1.1
* Server certificate:
*  subject: CN=*.xxx
*  start date: Aug  2 00:00:00 2022 GMT
*  expire date: Aug 29 23:59:59 2023 GMT
*  subjectAltName: host "xxx" matched cert's "*.xxx"
*  issuer: C=CN; O=TrustAsia Technologies, Inc.; OU=Domain Validated SSL; CN=TrustAsia TLS RSA CA
*  SSL certificate verify ok.
> OPTIONS /base/send/sms HTTP/1.1
> Host: xxx
> Accept-Encoding: deflate, gzip, br
> authority: xxx
> accept: */*
> accept-language: zh,en;q=0.9
> access-control-request-headers: appid,authorization,content-type,v,version
> access-control-request-method: POST
> origin: https://xxx
> referer: https://xxx/
> sec-fetch-dest: empty
> sec-fetch-mode: cors
> sec-fetch-site: same-site
> user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36
> 
* Mark bundle as not supporting multiuse
< HTTP/1.1 200 OK
< Server: nginx
< Date: Fri, 13 Jan 2023 06:18:31 GMT
< Content-Type: application/octet-stream
< Content-Length: 0
< Connection: keep-alive
< Access-Control-Allow-Origin: https://xxx
< Access-Control-Allow-Credentials: true
< Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
< Access-Control-Allow-Headers: *
< Access-Control-Max-Age: 1728000
< Content-Type: text/plain charset=UTF-8
< Content-Length: 0
< 
* Connection #0 to host xxx left intact

解决办法

修改前nginx配置

listen 443 ssl http2;

修改后nginx配置

listen 443 ssl ;

提示

nginx的主配置文件和虚拟主机配置文件有一处启用http2，整个nginx都会收到http2的影响。