Several problems of cross-domain request

CORS: Cross-Origin Resource Sharing (CORS) is a mechanism that uses an extra HTTP header to tell the browser so that Web applications run on a single origin (domain) to be granted access to specific resources from different sources on the server. When a resource request for a resource from a different server itself, where the resource domain, protocol or port, resource initiates a cross-domain HTTP request.

For security reasons, restrict browser launched from within the script cross-origin HTTP request. For example, XMLHttpRequest and Fetch API follows the same-origin policy. This means that the use of these API's HTTP Web application can only request resources from the same domain to load the application, unless the response packet containing the correct CORS response headers.

origin: Web of origin is defined as URL access protocol, domain, and port thereof. Only when the protocol, all domain and port match, only two objects having the same origin.

Access-Control-Allow-Origin: if the response can be shared with the request code from the origin given.

Access-Control-Allow-Origin：*  #允许任何源的代码访问资源
Access-Control-Allow-Origin: https://developer.mozilla.org  #允许请求来自https://developer.mozilla.org 的代码访问资源。

Access-Control-Allow-Methods: In response to preflight request (preflight request) is clearly a resource to be accessed by the client allows the use of a method or list of methods

Access-Control-Allow-Methods POST,GET,OPTIONS,PUT

Access-Control-Allow-Headers: a preflight request (request preflight) species listed in the header information will appear in the Access-Control-Expose-Headers field of the formal request for a response included in Access-Control -Request-headers preflight request header.

Access-Control-Allow-Headers Content-Type,access-control-allow-credentials,access-control-allow-origin

Access-Control-Max-Age: This response indicates preflight request (request preflight) returns the result (i.e., information Access-Control-Allow-Methods and Access-Control-Allow-Headers provided) may be cached header long.

Access-Control-Max-Age: 600 #

The CORS preflight request (option): in CORS may use the OPTIONS method to initiate a request for pre-screening (usually through detected cross-domain request, will automatically initiate a), to detect whether an actual request may be accepted by the server . Access-Control-Request-Method preflight request packet header field to inform HTTP request method for the server actually used; Access-Control-Request-Headers Custom header field to inform the server header field carries the actual request. Based on information obtained from the server preflight request to judge whether to accept the next request practical.

OPTIONS /resources/post-here/ HTTP/1.1
Host: bar.other
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
Origin: http://foo.example
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-PINGOTHER, Content-Type

Access-Control-Allow-Methods header field returned by the server to inform all methods allow the client requests. Allow the header fields are similar, but only to relate to CORS scene.

For more information, please visit the http header https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers

II. Cross-Domain Troubleshooting common issues (CORS scene)

2.1. Not configured Access-Control-Allow-Origin.

Access to XMLHttpRequest at 'http://foo1.example.com/' from origin 'http://foo2.example.com/' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

Workaround: Add the Access-Control-Allow-Origin is http://foo2.example.com in the domain foo1.example.com virtual host.

server {
    ...
    server_name foo1.example.com;
    ...
    add_header 'Access-Control-Allow-Origin' 'http://foo2.example.com';
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';

    if ($request_method = "OPTIONS")  {
        return 204;
    }
    ...
}

2.2. Cross-domain access

Access to XMLHttpRequest at 'http://foo1.example.com/' from origin 'http://foo3.example.com/' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'http://foo2.example.com/' that is not equal to the supplied origin.

Solution: Please observe the above given, Access-Control-Allow-Origin http://foo2.example.com has at least one value set. So now configure a profile multi-source access permission.

server {
    ...
    server_name foo1.example.com;
    ...
    if ( $http_origin ~ .*.(example|aldwx).(net|com)) {
        set $other_domain $http_origin;
    }

    add_header Access-Control-Allow-Origin $other_domain;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';

    if ($request_method = "OPTIONS")  {
        return 204;
    }
    ...
}

2.3. Access-Control-Allow-Headers in the header deletion

Access to XMLHttpRequest at 'http://foo1.example.com/' from origin 'http://foo2.example.com/' has been blocked by CORS policy: Request header field <u>cookies</u> is not allowed by Access-Control-Allow-Headers in preflight response.

Workaround: When you encounter this kind of problem, you need to carefully read the error, an error which has basically been stated in the answer. For example, the above error message. Time domain foo2.example.com request field foo1.example.com, because cookies header is not included in Access-Control-Allow-Headers, all foo1 not respond to client requests. And this kind of problem may also occur several request headers missing, but a single error occurs, so, should carefully read the error. The following is one of error

Access to XMLHttpRequest at 'http://foo1.example.com/' from origin 'http://foo2.example.com/' has been blocked by CORS policy: Request header field <u>access-control-allow-credentials</u> is not allowed by Access-Control-Allow-Headers in preflight response.

server {
    ...
    server_name foo1.example.com;
    ...
     
    if ( $http_origin ~ .*.(example|aldwx).(net|com)) {
        set $other_domain $http_origin;
    }

    add_header Access-Control-Allow-Origin $other_domain;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers 'access-control-allow-credentials,cookies,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

    if ($request_method = "OPTIONS")  {
        return 204;
    }
    ...
}

Reference article:
Nginx configuration cross-domain requests Access-Control-Allow-Origin *

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers