CORS 阻止 Nginx 上的 POST http 令牌调用

Question

我有一个本地 nginx 服务器在 localhost:80 上的 macOS (M2) 上运行，我正在尝试连接一个在 localhost:8100

上运行的 Ionic 5 应用程序

酿造服务运行：

mysql       ~/Library/LaunchAgents/homebrew.mxcl.mysql.plist
nginx       ~/Library/LaunchAgents/homebrew.mxcl.nginx.plist                 
[email protected]     ~/Library/LaunchAgents/[email protected]

一开始每次调用api都被cors屏蔽。现在用这个nginx.conf

修复了

http {
  add_header 'Access-Control-Allow-Origin' 'http://localhost:8100'; #The Ionic app IP
  add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
  add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
  
  server {
    listen       80;
    server_name  localhost;
    root /opt/homebrew/var/www/mySymfony3Api/public; #Server path
    index index.php index.html index.htm;

    add_header 'Access-Control-Allow-Origin' 'http://localhost:8100';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'content-type, Authorization';

    location / {
      [...]
      add_header 'Access-Control-Allow-Origin' 'http://localhost:8100';
      add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
      add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
    }
  }

}

这是 security.yaml 中的端点

security:
  firewalls:
    oauth_token:
      pattern: ^/oauth/v2/token
      fos_oauth: true
      stateless: true
      anonymous: true

现在一些 GET api 调用正在运行。 （我知道我可能在那里过度扩张但它有效）

尝试调用令牌生成端点时出现问题：

http://localhost/oauth/v2/token

如果我从邮递员那里调用它，它就可以工作，即使我使用 curl 通过终端调用它

curl --location 'http://localhost/oauth/v2/token' \
--header 'Content-Type: application/json' \
--data-raw '{
  "grant_type":"password",
  "username":"[email protected]",
  "password":"myPassword",
  "client_id":"aValidClientID",
  "client_secret":"aValidClientSecret"
}'

这工作正常，但使用任何浏览器，即使有扩展禁用 CORS（以防万一）请求被阻止。

这是失败的请求

Request URL: http://localhost/oauth/v2/token
Referrer Policy: strict-origin-when-cross-origin

- Request Headers - 
Accept: application/json, text/plain, */*
Content-Type: application/json
Referer: http://localhost:8100/
sec-ch-ua: "Brave";v="111", "Not(A:Brand";v="8", "Chromium";v="111"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "macOS"
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36

这是显示控制台的错误：

login:1 Access to XMLHttpRequest at 'http://localhost/oauth/v2/token' from origin
'http://localhost:8100' has been blocked by CORS policy: Response to preflight request
doesn't pass access control check: It does not have HTTP ok status.

这是实际有效的请求示例：

Request URL: http://localhost/api/establishment_types
Request Method: GET
Status Code: 200 OK
Remote Address: 127.0.0.1:80
Referrer Policy: strict-origin-when-cross-origin

- Response Headers -
HTTP/1.1 200 OK
Server: nginx/1.23.3
Content-Type: application/json
Transfer-Encoding: chunked
Connection: keep-alive
X-Powered-By: PHP/7.3.33
Cache-Control: no-cache, private
Date: Thu, 23 Mar 2023 12:44:17 GMT
X-Debug-Token: 53f151
X-Debug-Token-Link: http://localhost/_profiler/53f151
X-Robots-Tag: noindex
access-control-allow-origin: http://localhost:8100
access-control-allow-methods: PUT, GET, HEAD, POST, DELETE, OPTIONS
access-control-allow-headers: *
access-control-allow-credentials: true

- Request Headers -
GET /api/establishment_types HTTP/1.1
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: es-ES,es;q=0.9
Connection: keep-alive
Host: localhost
Origin: http://localhost:8100
Referer: http://localhost:8100/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
Sec-GPC: 1
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36
sec-ch-ua: "Brave";v="111", "Not(A:Brand";v="8", "Chromium";v="111"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "macOS"

知道我能做什么吗？我尝试了一切都没有结果

Answer 1

非 200 响应也必须使用

always

进行相应处理，这确保浏览器将始终收到所有 CORS 请求的正确响应标头。在

server

块：

配置

$ cat /etc/nginx/nginx.conf 
server {
  listen 888;

  # Headers will be removed if location {} adds headers there
  add_header Access-Control-Allow-Origin * always;

  # Immediately satisfy CORS requests - above CORS headers are included
  if ($request_method = OPTIONS) {
    return 200;
  }
}

测试

$ curl -I -X OPTIONS localhost:888/   # ✅ 200
HTTP/1.1 200 OK
Access-Control-Allow-Origin: *

$ curl -I -X GET localhost:888/       # ✅ 404
HTTP/1.1 404 Not Found
Access-Control-Allow-Origin: *