If the server implements the CORS interface, it can communicate across sources. How?

// Specify the source domain that allows cross-domain resource access. CTX. Set (" Access - Control - Allow - Origin ", "http://127.0.0.1:8080"); / / the specified list of allowed to request method, generally in response to a service request CTX. Set (" Access - Control - Allow - the Methods ", "OPTIONS, POST, GET, HEAD, DELETE, PUT"); / / necessary. Set (" request-requested-with, accept, Origin, content-type"); set(" requested-with, accept, Origin, content-type");Copy the code

Browsers divide CORS requests into two categories: simple requests and non-simple requests

Simple request basic process

1. When the browser realizes that the cross-source AJAX request is simple, it automatically adds an Origin field to the header (which source the request came from).

If Origin specifies a source, it is not covered by the license:

The response header does not contain access-control-allow-origin

Non-simple request

Precheck requests: CORS requests that are not simple requests add an HTTP query request before formal communication

Start by asking the server if the domain where the current web page is located is on the server’s licensed list and what method headers are available

“Precheck” requests use the request method OPTIONS, which is used to ask

Make a precheck request first

Origin: http://api.bob.com Access-Control-Request-Method: PUT Access-Control-Request-Headers: X-custom -Header // Specifies the Header field that will be sent for browser CORS requests. Host: api.alice.com **// Request URL domain name **Copy the code

Response to precheck request

After the server receives the “precheck” Request, it checks the Origin, access-control-request-method, and Access-control-Request-headers fields, confirms that cross-source requests are allowed, and then responds.

Access-Control-Allow-Origin: http://api.bob.com Access-Control-Allow-Headers: X-custom -Header access-control-allow-methods: GET, POST, PUT returns all supported Methods. Avoid multiple "precheck" requests. Access-control-allow-credentials: true access-control-max-age: 1728000 Specifies the validity period of the precheck request, in secondsCopy the code

JSONP supports only GET requests, while CORS supports all types of HTTP requests. The advantages of JSONP are support for older browsers and the ability to request data from sites that do not support CORS.

As long as the following two conditions are met, it is a simple request.

(1) The request method is one of the following three methods:

  • HEAD
  • GET
  • POST

(2) HTTP header information does not exceed the following fields:

  • Accept
  • Accept-Language
  • Content-Language
  • Last-Event-ID
  • Content-type: Only three values: Application/X-www-form-urlencoded, Multipart /form-data, text/plain

 

To carry cookies, the front end must open the withCredentials property in the AJAX request.

var xhr = new XMLHttpRequest();

xhr.withCredentials = true;

To send cookies, access-control-allow-origin cannot be set to an asterisk and must specify an explicit domain name that matches the requested web page.

Cookies still follow the same origin policy, only cookies set with the server domain name will be uploaded

From the original learning: www.ruanyifeng.com/blog/2016/0…