Same origin Policy & Cross domain

What is CORS?

CORS stands for Cross-Origin Resource Sharing, that is, cross-domain Resource Sharing.

CORS is an HTTP Header-based mechanism that allows a server to identify domains other than its own. The CORS mechanism implemented by the server and the browser can break the restriction of the browser on cross-domain resource access and realize cross-domain resource request.

CORS authentication mechanism

The verification mechanism of CORS can be divided into two modes: simple request and precheck request.

A simple request

In simple request mode, the browser sends the request directly and carries Origin in the request header. After receiving the request, the server returns the verification result through the access-Control-Allow-Origin response header according to its own cross-domain rules.

A simple request is one that meets all of the following conditions:

  1. Request method
    • GET
    • POST
    • HEAD
  2. Content-TypeThe field values
    • text/plain
    • multipart/form-data
    • application/x-www-form-urlencoded
  3. Manually setHeaderFields can only be user-defined fields andFetchnormal-definedCORSSecurity field.
    • Accept
    • Accept-Language
    • Content-Language
    • Content-Type
    • DPR
    • Downlink
    • Save-Data
    • Viewport-Width
    • Width

Preview the request

Requests requiring prechecking must first send a prechecking request to the server using the OPTIONS method. The server determines whether to accept the actual request based on the prechecking information.

Preview the requestHeader:

  • Access-Control-Request-Method

Specifies the HTTP method used for the actual request.

  • Access-Control-Request-Headers

Specifies the field carried by the actual request.

Preview the responseHeader:

  • Access-Control-Allow-Origin

Specifies the domain to which access is allowed.

  • Access-Control-Allow-Methods

Specifies the allowed HTTP request methods.

  • Access-Control-Allow-Headers

Specifies the fields allowed to carry.

  • Access-Control-Max-Age

Specifies the validity period of the response during which the browser does not need to make another precheck request for the same request.

The browser checks the precheck response and sends the actual request if it passes the precheck.

Using prechecked requests prevents cross-domain requests from having an unexpected impact on the server’s data.

HTTP Header

The request Header

  • Origin: <origin>

Specifies the domain in which the request resides.

  • Access-Control-Request-Method: <method>

Specifies the HTTP method used for the request.

  • Access-Control-Request-Headers: <field-name>[, <field-name>]*

Specifies the fields carried by the request.

The response headers

  • Access-Control-Allow-Origin: <origin> | *

The origin value specifies the domain that is allowed to access the resource, and the * indicates that requests from any domain are allowed.

  • Access-Control-Expose-Headers: <field-name>[, <field-name>]*

Specifies the fields that the browser is allowed to access.

  • Access-Control-Max-Age: <delta-seconds>

Specifies the validity period of the response during which the browser does not need to make another precheck request for the same request.