What is the same origin policy

  • Protocol (HTTP/HTTPS), port (80/8080), domain name (Baidu/Google) must be the same
  • document.domain

JSONP

The SRC attribute of the Jsonp-script tag is not restricted by the same origin policy. If a resource is requested from a non-same origin server in this way, the returned JS code will call the specified function and carry the required parameters, thus completing the cross-domain request.

  • JSONP(JSON with Padding) is a “usage mode” of JSON that can be used to solve the problem of cross-domain data access in mainstream browsers.

Jsonp does not use XMLHttpRequest objects. 2. Jsonp is just a cross-domain technique. 3. Jsonp supports only Get mode

let scriptDom = document.createElement("script");
scriptDom.src="Request an address? Callback = function name";
document.body.appendChild(scriptDom);
Copy the code

CORS

  • CORS -Cross-Origin Resource

Sharing(Cross-domain Resource Sharing) is a mechanism that allows resources (such as HTML/JS/Web Services) from the current domain (Origin) to be accessed by scripts from other domains (Origin). When sending a request using XMLHttpRequest, If the browser finds that the same origin policy is violated, it automatically adds a request header: Origin. After receiving the request and confirming the Response, the backend adds an attribute: Access-Control-allow-Origin to the Response Headers, and the value is the source of the request

Specific process of CORS (Understanding)

  1. The browser sends a cross-domain request
  2. After receiving a cross-domain request, the server adds the access-Control-Allow-Origin Header resource permission configuration in the response Header. Send a response
  3. After the browser receives the response, check whether header(‘ access-Control-allow-origin: *’) has been configured.
  4. If the current field is already authorized, the result is returned to JavaScript. Otherwise, the browser ignores the response.

Conclusion: 5. The cross-domain behavior is the behavior of the browser, and the response is back, but the security mechanism of the browser has made restrictions on the cross-domain response content is ignored. 6. There is no cross-domain problem between servers

Cross-domain server processing: in the separation of front and back end project can be implemented with the help of a server cross-domain, particular way is: front end sends a request to the local server local server instead of the front and then send the request to the server to the API server interface communication, the role of the local server is a transfer station, the response data is returned to the front again

Jsonp vs. CORS

  • Jsonp is compatible and supported by older browsers, but jSONP only supports GET requests and sends a limited amount of data. Use of trouble
  • Cors requires the browser to support CORS. But simple to use, as long as the server Settings allow cross-domain, for the client, with ordinary GET, POST requests are no different.
  • Cross-domain security issues: Because cross-domain requires server coordination control, that is to say, whether JSONP or CORS, without the permission of the server, the browser cannot do cross-domain.

Use Nginx

  • Convenient cross-domain solution Nginx

Nginx is an extremely powerful Web server with the advantages of being lightweight, fast to start, and high concurrency.

  • Nginx is now almost the first choice for new projects, and services we develop in Node or Java often need to go through nginx reverse proxies.

The principle of reverse proxy is very simple, that is, all requests from the client must be processed by Nginx, and then nginx acts as the proxy server to forward the request to Node or Java service, thus circumventing the same origin policy.

What other cross-domain situations do you encounter?

  • iframe

PostMessage (iframe related)

Html5 PostMessage(data: the data that needs to be sent, Origin: protocol + host + port number [+URL])

1. Data transfer between the page and the new window it opens 2. Message transfer between multiple Windows 3. Page versus nested IFrame messaging 4. Cross domain data delivery for the above three issuesCopy the code

reference

  • www.cnblogs.com/why210/p/95…

Outside the chain

  • Remember the spring of 2020 senior front-end interview | progressive enhancement topic selection (last)
  • Gluten series – HTTP – Same origin policy and cross domain processing
  • Gluten series – HTTP – Front-end cache
  • Gluten series -javascript-ES6 foundation
  • Gluten Series -javascript- Handwriting problems and Basics
  • Gluten series – React-setsate synchronous asynchrony issues