Homology strategy and Cors

homologous Policy

The same-origin policy is the browser to protect users secure Internet access, the protocol, domain name, port number of the same is the same origin.

Under different sources, the browser does not allow JS to manipulate data or page elements such as cookies, localstorage, or DOM, nor does it allow the sending of AJAX requests, which are unaffected by homology.

is an error message that sends an AJAX cross-domain request in the Chrom console:

The yellow part of the picture indicates that the response was blocked, indicating that in the case of cross-domain, the request was still sent to the server and the server returned the data, just stopped by the browser.

For cross-domain issues you can use Cors to resolve, when using Cors, HTTP requests fall into two situations: simple requests and complex requests.

Simple Request

The following three points are simple requests:

• The HTTP request method is get, post, or head
• The HTTP request header can only contain Accept, Accept-Language, Content-Language, Content-Type orLast-Event-ID
• The value of contenttype can only be in the following three types:
  • application/x-www-form-urlencoded
  • Multipart/form-data
  • Text/plain

Complex Requests

Complex requests in addition to simple requests. The browser sends the preflight request (pre-check requests) before sending the complex request, which is to send the options request. Note that the browser is sent, the user has no sense.

A preflight request header contains two specific fields:

• Access-control-request-method
  Represents the HTTP method that will be used for subsequent requests, which must be selected
• Access-control-request-headers
  Request header information set in subsequent requests, note that this does not contain the browser default settings for the header field, such as: User-Agent . This field is not sent.

The server checks the, field values in the preflight request, Origin Access-Control-Request-Method Access-Control-Request-Headers and returns a normal HTTP response.
The browser determines whether subsequent requests conform to server-side cross-domain requirements based on the return information, and throws an error message if it does not match. After a preflight request, a subsequent request is sent, and the simple request is no different at this time.

Several fields of server configuration Cors

• Access-control-allow-origin
  Required, set which sources are allowed to access server resources
• Access-control-allow-methods
  Required, set which HTTP methods are allowed
• Access-control-request-headers
  Set which fields are included in the HTTP request header, required if the browser request includes Access-Control-Request-Headers fields

The above three fields are characters commonly used, and the rest of the fields are configured as a reference: CORS policy options.

a problem

Last week, using cors in ASP. NET Web API 2 The ‘Access-Control-Allow-Origin‘ header contains multiple values ‘*, *‘, but only one is allowed , error:. The reason is that two cors has been configured on the server side, resulting in two returned Access-Control-Allow-Origin:* but only one for the browser.

After troubleshooting Web.config , you also configure cors in the file, duplicate the configuration in the code, and then resolve the issue after commenting out. This question refers to: StackOverflow on the answer.

Summary

The same-origin policy is the browser to protect the user (data) security and the JS function to certain limits. After all, HTML and CSS are only responsible for Web page structure and style, do not have the ability to manipulate page elements and interact with the server.

Cross-domain issues are no longer present when you leave the browser environment.

Strict restrictions can cause some inconvenience, so the homologous strategy opened a few openings:

• Cookie Sharing
  Subdomains can share cookies for parent domain names

• Embedded Resource Acquisition
  <script>,,<link>Such tags are not restricted by the same source policy, which is also the principle of JSONP implementation of cross-domain

Common ways to handle cross-domain requests are JSONP and cors:

• JSONP
  Requires front-end collaboration processing and only get requests are supported
  Not a standard specification
  Friendly to the old browser (here's the idea of the antique ie:)

• CORS
  Support for multiple requests such as GET, POST, PUT, delete, etc.
  Server-side configuration is simple and does not require front-end write additional code
  The Cors specification is currently supported by mainstream browsers

Recommended Reading

The security of the browser family strikes
Enable Cross-origin Requests (CORS) in ASP.
Front-End Separation | About the sign-in status.
Cross-origin Resource Sharing (CORS)

Same-origin policy and cors