I have built up a prototype system.

Vue admin client. ( localhost:8081 ). -->. [ Nginx ( public IP server). --> node.js ( localhost with port 3000 ) ]

a GET request sent to /api/v1/capacha/code, but received the CORS error. as seen in the first image, a XHR CORS error appeared first and then a preflight 204 request returned successfully. as you seen in the second picture, preflight OPTION request is returned in 204.

Here is my first question why there is no further GET request when the preflight request is returned successfully with 204

On the server side, I viewed the nginx access log, confirmed there are only OPTION request on /api/v1/capacha/code

[22/Sep/2024:03:14:07 +0800] "OPTIONS /api/v1/capacha/code HTTP/1.1" 204 0 "http://localhost:8081/" 
[22/Sep/2024:03:14:10 +0800] "OPTIONS /api/v1/capacha/code HTTP/1.1" 204 0 "http://localhost:8081/" 
.....

Here is my nginx config

 server {

        listen 80 default_server;
        listen [::]:80 default_server;
       # Default server configuration
         server_name http://app.myhost.com;
         location / {

              root /opt/web; try_files $uri /index.html;


         }
      location /api {
         # Add CORS headers
         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;

         # Handle preflight OPTIONS requests
         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;
              return 204;

          }

          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header Host $http_host; proxy_set_header X-Forwarded-Proto $scheme;
          proxy_pass http://127.0.0.1:3000; # SSL configuration
    }
 }

It is clear my nginx config has add the access control origin and related header, and the code section on ($request_method = OPTIONS) { } is returning 204 successfully. but why the request is still blocked during the nginx.