All headers are spelled out, but why No 'Access-Control-Allow-Origin'?

Question

JavaScript

server {
  listen 80;
  set $subdomain domain;
  server_name domain.loc;
        set $index index.php;
  index $index; 
  root /var/www/$subdomain/public/; 
  gzip_comp_level  5;
        gzip on;
        gzip_disable "msie6";
        gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript;

        location @rewrites {
          rewrite ^/(.*)$ /$index last;
        }

        location / { 
         charset utf-8; 
         try_files $uri $uri/ @rewrites;
        }
  
        location ~ \.php$ {
         fastcgi_pass unix://var/run/php/php7.0-fpm.sock;
         fastcgi_index $index;
         fastcgi_param SCRIPT_FILENAME $document_root/$fastcgi_script_name;
         include fastcgi_params;
         break;
        }
} 

server{
        listen 80;
  set $subdomain domain;
  server_name u1.domain.loc;
        set $index index.php;
  index $index; 
  root /var/www/$subdomain/public/; 
        location @rewrites {
          rewrite ^/(.*)$ /$index last;
        }

        location / {
         add_header "Access-Control-Allow-Origin" "*"; 
         add_header "Access-Control-Allow-Methods" "GET, POST, PUT, DELETE, OPTIONS";  
         charset utf-8;  
         try_files $uri $uri/ @rewrites;
        } 
        location ~ \.php$ {
         fastcgi_pass unix://var/run/php/php7.0-fpm.sock;
         fastcgi_index $index;
         fastcgi_param SCRIPT_FILENAME $document_root/$fastcgi_script_name;
         include fastcgi_params;
         break;
        }
}

there is ajax

$.ajax({
                        url: ' http://u1.domain.loc/upload',
                        data: fd,
                        type: 'POST',
                        contentType: false,
                        processData: false, 
                        cache: false,
                        success: function (data) {
                        }

Why does
XMLHttpRequest cannot load u1.domain.loc/upload error. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' domain.loc ' is therefore not allowed access.
What could be the problem ?

Answer 1

Look at the real server responses in Chrome Developer Tools in the Network panel with the "Disable Caching" option disabled
There may not be CORS headers, or they may not be with the correct access-control-allow-origin if you have already opened the same URL through a direct request from a browser string or requested the same URL in the same browser from a different domain.
The fact is that the browser caches responses including headers. The key in the cache is the request URL, and all headers (cookies, origin, referrer) are not involved. Therefore, you may have a cached response with the headers of a previously made request.
A solution that guarantees that the server response will not be cached:
1. specify headers in the server response that suppress caching
2. make requests using the POST method, which is not cached
3. add a tail of pseudo-random characters to the URL, such as the code revision, API version, the name of the calling application, or even the timestamp
. For example, the number of unread user messages.