This is the fifth day of my participation in Gwen Challenge

When should CORS be used?

AJAX is the technique used to update parts of the current web page instead of refreshing the entire page, but AJAX can only make HTTP requests to same-origin urls (same protocol, domain name, port). Therefore, when the front and back ends are separated, the cross-source communication problem needs to be solved by using CORS.

  • Asynchronous JavaScript and XML (AJAX) : Through Asynchronous communication of JavaScript, an XMLHttpRequest request is issued to obtain data from the server for local web page updates.
  • The XMLHttpRequest object is used to exchange data with the server in the background.
  • AJAX originally used HTTP (protocol) +XML (content format), but AJAX has been generalized to use multiple protocols (File, FTP) + any content format (string, binary, etc.).

What is CORS?

CORS (Cross-origin Resource Sharing) allows browsers to send XMLHttpRequest requests to cross-domain servers, so as to overcome the limitation that AJAX can only be used in the same source, which is the fundamental solution of cross-source AJAX requests.

Characteristics of CORS

  1. Requires both browser and server support
  2. Browser autocomplete: Using normal AJAX communication code, the browser automatically completes the communication process. When browsers discover AJAX requests across sources, they add special headers to the request headers or send special requests because the key to CORS communication implementation is the server
  3. The server needs to support: special headers are required in the response header

Classification of CORS

  • Simple Request: a request that meets the following two conditions
    • The request method is one of three:
      • HEAD
      • GET
      • POST
    • HTTP headers do not exceed the following fields:
      • Accept
      • Accept-Language
      • Content-Language
      • Last-Event-ID
      • Content-type: Application/X-www-form-urlencoded, multipart/form-data, text/plain
  • Not-so-simple Request: indicates a request other than a simple request

Simple Request flow

For simple requests, the browser issues a CORS request directly:

  • When the browser realizes that the cross-domain AJAX request is simple, it automatically adds an Origin field to the header information.
  • The Origin field indicates the domain (protocol + domain name + port) from which the request is sent. Based on this value, the server decides whether to approve the request or not.
  • If Origin specifies a source that is not covered by the license, the server will return a normal HTTP response (CORS communication responses contain specific fields).

Non-simple request flow

Non-simple requests will check whether they can communicate before formal communication:

  • Preflight request: An additional HTTP query request is called a preflight before formal communication. The browser asks the server if the domain name of the current web page is on the server’s license list, and what HTTP verb and header fields can be used.
  • Formal request: After prechecking for a positive response, formally issue the XMLHttpRequest request.

Why are “simple requests” distinguished from “non-simple requests”?

Special operations (add, DELETE, and so on) PUT pressure on traditional servers without CORS support, giving the server an opportunity to reject early. This prevents the server from being flooded with DELETE and PUT requests that traditional forms cannot make across domains.