One, with the domain

The same origin policy was introduced by Netscape in 1995.

When we log in to some shopping websites or banking systems, the server will carry a set-cookie field. The browser will store the cookie returned by the server locally, and the next request will carry this cookie. If there is a malicious link in the website, and the request is made with the cookie of the website, the server defaults the request to be trusted, and it may be maliciously operated, such as wiping money from the bank card or stealing the account password, or doing other things. Therefore, this is a serious security problem, so the same origin policy was proposed.

Because of the browser’s same-origin policy, only the data resources that the same-domain server responds to when sending an Ajax request are received. The conditions to satisfy the homology include three:

  • The agreement is the same

  • Domain name is the same

  • The same port

If the above three conditions are not met, it is considered cross-domain.

2. Methods to solve cross-domain problems

1. Local proxy

Sympatric agent is to use Ajax to send the request with under the domain of the background, at the same time carry real address and parameters of the request, the background after accepting requests directly according to the forwarding address and parameter request, because the background is can simulate the HTTP client sends a request directly, so there is no problem of cross-domain, receive the response data and the background after the same returned to the front the browser, So as to realize cross-domain data interaction.

2, ping img

Img tag can be used to load cross-domain resources, load the request URL into href attribute, so as to achieve the purpose of cross-domain resources request. This solution can only send GET requests, and the communication is single, can not get a response from the server, is usually used for image click count, AD view count, and other scenarios.

3, the json

When the browser parses the HTML code, the browser gives the tag with the SRC attribute HTTP request capability, and is not subject to the cross-domain restriction, so the request URL can be written to the script SRC attribute to request cross-domain resources, with a callback function name at the end of the URL. The server does some processing according to the convention of the function name parameter, returns data, and the client callback function retrits the request response information, such as the following demo

var handler = (resp) = > {
  console.log(resp)
}
var script = document.createElement('script');
script.src = "http://www.xxx.com?callback=handler";
document.body.appendChild(script);
Copy the code

This approach to cross-domain problems has several problems: request errors are difficult to catch and only GET requests can be sent

4. Cross-domain resource sharing CORS

CORS is a W3C standard, which stands for “Cross-origin Resource Sharing”.

The value of this field is the source (protocol + domain name + port number) of the current page. After receiving the request, the server will determine whether the source can be trusted. If the source can be trusted, when responding to the request, It takes an Access-Control-Allow-Origin field, which may be the current source or an ‘*’.

CORS does not support Cookie and HTTP authentication information with requests by default to protect against XSS and CSRF attacks. To enable cookies, set withCredentials to true. In response to requests, set access-Control-allow-credentials to true. The server setting access-Control-allow-Origin to ‘*’ will not work.