This is the 26th day of my participation in the August More Text Challenge

preface

`Access to XMLHttpRequest at 'https://xxx.xxx.com' from origin 'https://xxx.xxx.com' has been blocked by CORS policy: No 'access-Control-allow-origin' header is present on the requested resource. 'Copy the code

I believe you have seen this error, yes, this is cross-domain. Cross-domain means that the browser cannot execute scripts from other sites. It is caused by the same origin policy of the browser and is a security restriction imposed by the browser on JavaScript. To be clear, the inability to cross domains is a security consideration for the user. If you write a browser without the same origin policy, you don’t need to worry about cross-domains at all. It’s the browser’s pot, right. The same origin policy restricts the behavior that cookies, LocalStorage, and IndexDB cannot read DOM and JS objects cannot fetch Ajax requests cannot be sent

First, only the browser can produce cross-domain because the browser’s same-origin policy is limited. The same origin policy means that the domain name (also called host), port, and protocol must be the same. Otherwise, the browser determines that the request is cross-domain and rejects it. But strictly speaking, browsers don’t reject all cross-domain requests, they actually reject cross-domain reads.

The same-origin policy is not bad, it to a certain extent, ensure the safety of the browser is unable to adapt to the modern trend, the after service of the project, the different responsibilities of service scattered in different engineering, often these engineering domain name is different, but a demand may require corresponding to multiple services, then they need to call different service interface.

N means of resolving cross-domain requests

1, the json

Script is not restricted by the same origin policy

Disadvantages: Only get mode, vulnerable to XSS attack

2. Cross-origin Resource Sharing (CORS), cross-domain Resource Sharing

When sending a request using XMLHttpRequest, the browser automatically adds a request header origin if it finds a violation of the same origin policy.

After receiving the request and confirming the Response Headers, the backend adds an access-Control-allow-origin attribute to the Response Headers.

The browser checks whether the access-Control-allow-origin value in the response is the same as the current address and processes the response only after the match is successful. Otherwise, an error message is displayed

Disadvantages: Ignore cookies, browser version has certain requirements

Once a browser that supports CORS requests discovers that ajax requests cross domains, it will do some special processing to the request. For the server that has implemented THE CORS interface, it will accept the request and respond to it.

In a special case, if we send a cross-domain request that is “non-simple”, the browser will send a “pre-check request” of type OPTIONS before sending the request to verify that the source of the request is the server’s permitted source, which is not sensed by the developer, and is proxy by the browser.

In summary, the client does not need to do any special processing for cross-domain requests.

  • Access-Control-Allow-Origin

This is a field in the HTTP response header,

Specific format is: Access – Control – Allow – Origin: < Origin > | *.

Where, the value of the Origin parameter specifies the outdomain URI that is allowed to access the resource. For requests that do not require credentials, the server can specify the value of this field as a wildcard, indicating that requests from all domains are allowed.

If the server specifies a specific domain name rather than *, the value of the Vary field in the response header must contain Origin. This tells the client that the server returns different content for different source sites. Such as:

// Only respond to requests from http://mozilla.com access-Control-allow-Origin: http://mozilla.comCopy the code
  • Access-Control-Allow-Methods

This field is required, and its value is a comma-separated string indicating all methods supported by the server for cross-domain requests. Notice that all supported methods are returned, not just the one requested by the browser. This is to avoid multiple “pre-check” requests.

Access-control-allow-methods:

[,

]*

  • Access-Control-Allow-Headers

The supported request header name. The request header lists all supported headers, separated by commas.

The access-Control-allow-HEADERS field is required if the browser Request includes the access-Control-request-HEADERS field. It is also a comma-separated string indicating all header information fields supported by the server, not limited to those requested by the browser in precheck.

The format is access-Control-allow-headers:
[,
]*

  • Access-Control-Allow-Credentials

This field is optional. Its value is a Boolean value indicating whether cookies are allowed to be sent. By default, cookies are not included in CORS requests. If set to true, the server explicitly approves that cookies can be included in the request and sent to the server.

This approach is divided into two types of request:

One is simple request and the other is non-simple request

Simple requests across domains:

The request mode can be HEAD, POST, or GET

Non-simple requests cross domains:

Non-simple requests are requests that have special requirements on the server, such as the request method being PUT or DELETE, or the content-Type field being of Type Application/JSON

3. Proxy cross-domain request (Nginx)

The front end sends a request, through the proxy, to request the required server resources

Disadvantages: Additional proxy servers are required

Html5 postMessage method

Allowing scripts from different sources to communicate asynchronously in a limited manner enables cross-text, multi-window, cross-domain messaging

Disadvantages: Browser version requirements, some browsers should be configured to release cross-domain restrictions

5, modify document.domain cross subdomain

For different subdomain resources under the same main domain name, set document.domain to the same level 1 domain name

Disadvantages: same level domain name; Same protocol; The same port

6. Based on Html5 Websocket protocol

Websocket is a new Html5 protocol, based on which the browser and server can achieve full duplex communication, allowing cross-domain requests

Disadvantages: The browser version requires that the server support the WebSocket protocol

Document. XXX + iframe

The iframe is a browser non-homologous tag that loads content and passes it to the properties of the current page

Disadvantages: Page property values have size limits

summary

In the real world, the way we use CROS in conjunction with the back end will be more common. Of course, if you put the Web project and the back-end interface project in the same domain, there is no cross-domain problem.