How web api solves cross-domain requests

How web api solves cross-domain requests? http Header related concepts CORS: Cross-Domain Resource Sharing (CORS) is a mechanism that uses an extra HTTP header to tell the browser to allow web applications running on an origin (domain) to be granted access to specified resources from different source servers.

http Header related concepts

CORS: Cross-Domain Resource Sharing (CORS) is a mechanism that uses an extra HTTP header to tell the browser to allow web applications running on an origin (domain) to be granted access to specified resources from different source servers. When a resource requests a resource from a different domain, protocol, or port than the server itself, the resource initiates a cross-domain HTTP request.

For security reasons, the browser restricts cross-origin HTTP requests originating from within the script. For example, XMLHttpRequest and Fetch API follow the same-origin policy. This means that web applications that use these APIs can only request HTTP resources from the same domain that loads the application, unless the response message contains the correct CORS response header.

Origin: The origin of the web is defined as a URL access consisting of a protocol, a domain, and a port. Only when the protocol, domain and port are all matched, the two objects have the same origin.

Access-Control-Allow-Origin: Whether the response can share the origin with the code from the given request.

Access-Control-Allow-Origin：*  #Allow code from any source to access resources
Access-Control-Allow-Origin: https://znlive.com  #Allows requests for code from https://znlive.com to access resources.

Access-Control-Allow-Methods: In the response to the preflight request, the list of methods or methods allowed by the resource to be accessed by the client is clarified.

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

Access-Control-Allow-Headers: Used for preflight requests, listing the header information that will appear in the officially requested Access-Control-Expose-Headers field for responses contained in Access-Control -Request-Headers The preflight request for the header.

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

Access-Control-Max-Age: This response header indicates how long the return results of the preflight request (that is, the information provided by Access-Control-Allow-Methods and Access-Control-Allow-Headers) can be cached.

Access-Control-Max-Age: 600 #

Preflight request in CORS: In CORS, you can use the OPTIONS method to initiate a preflight request (generally when the browse detects that the request crosses the domain, it will be automatically initiated) to detect whether the actual request can be accepted by the server. . The Access-Control-Request-Method header field in the preflight request message informs the server of the HTTP method used by the actual request; the Access-Control-Request-Headers header field tells the server the custom header field that the request actually carries. The server determines whether to accept the next actual request based on the information obtained from the preflight request.

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: https://znlive.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-PINGOTHER, Content-Type

The Access-Control-Allow-Methods header field returned by the server informs the client of all allowed request methods. This header field is similar to Allow, but can only be used in scenarios involving CORS.

How web api solves cross-domain requests

Access-Control-Allow-Origin is not configured.

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

Solution : Add the Access-Control-Allow-Origin value to https://bugmn.com on the virtual host with domain https://znlive.com.

server {
    ...
    server_name znlive.com;
    ...
    add_header 'Access-Control-Allow-Origin' 'https://bugmn.com';
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';

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

Cross-domain access

Access to XMLHttpRequest at 'https://znlive.com/' from origin 'https://bugmn.com/' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'https://znlive.net/' that is not equal to the supplied origin.

Solution: Please observe the above error. Access-Control-Allow-Origin has at least one setting of https://znlive.net. So now configure a configuration that allows multiple source access.

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;
    }
    ...
}

Missing first in Access-Control-Allow-Headers

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

Solution: When encountering this kind of problem, you need to read the error carefully, and the answer has been basically written in the error. For example, the above error message. When the domain bugmn.com requests the domain znlive.com, all the foo1 cannot respond to the client request because the first cookie is not included in the Access-Control-Allow-Headers. And this type of problem may have several missing requests at the same time, but the error is a single occurrence, so read the error carefully. The following is also one of the errors.

Access to XMLHttpRequest at 'http://foo1.example.com/' from origin 'https://znlive.net/' 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;
    }
    ...
}