The concept of cross-domain

The browser has a basic and core policy, the same origin policy, which protects the browser to ensure the security of received data. Without the same origin policy, the browser is vulnerable to XSS and CSRF attacks. The same Origin policy means that the protocol, domain name, and port number must be the same so that the front-end can access the desired resources.

If the protocol and port number are inconsistent, the front-end is often unable to solve the problem. Nginx needs to configure proxy forwarding

The same-origin policy restrictions include:

  1. Cookie, Session, localStorage
  2. Ifream embedded dom
  3. The HTTP request

The following resources are allowed to access:

  • <img src=XXX>
  • <link href=XXX>
  • <script src=XXX>

Cross-domain solutions

1.jsonp

Jsonp is a cross-domain solution frequently used by the front end. The principle is to access resources through script without being restricted by the same origin policy. Both the front end and the back end need to deal with it. If the front end has the function in JS and performs the fetch of the requested data.

Advantages: Good compatibility

Disadvantages: Only SUPPORT GET requests

<! <script> function show(data) {console.log(data); / / I do not love you} < / script > < script SRC = "http://127.0.0.1:3000? Wd =Iloveyou&callback=show"></script> / server.js let express = require('express') let app = express() app.get('/say', function(req, res) { let { wd, Log (wd) // Iloveyou console.log(callback) // show res.end(' ${callback}(' I don't loveyou ') ')}) app.listen(3000)Copy the code

Ajax and AXIOS implement JSONP in the same way

2.cors

CORS requires back-end support. Not compatible with IE8/9,IE 8 and 9 need to be implemented through XDomainRequest. To pass cookie information in the request header, you need to set the domain name and the withCredentials attribute. To enable CORS, set access-Control-allow-Origin on the server. This attribute indicates which domain names can access resources. If a wildcard is set, all websites can access resources. Although setting up CORS has nothing to do with the front end, solving cross-domain problems in this way can result in two cases of simple and complex requests being sent.

1) Simple requests

Condition 1: Use one of the following methods:

  • GET
  • HEAD
  • POST

Condition 2: The value of the content-Type is limited to one of the following:

  • text/plain
  • multipart/form-data
  • application/x-www-form-urlencoded

2) Complex requests

A request that does not meet these criteria is definitely a complex request. The CORS request of complex request will add an HTTP query request, called “precheck” request, before formal communication. This request is the option method, through which to know whether the server allows cross-domain request. For example, the request method is PUT or DELETE, or the content-Type field is application/ JSON.

Response to precheck request

After receiving the precheck Request, the server checks the Origin, access-Control-request-method, and access-Control-request-headers fields and confirms that cross-source requests are allowed, it can respond.

Once the server passes the “precheck” request, every subsequent normal BROWSER CORS request will have the same Origin header field as a simple request. The server also responds with an Access-Control-Allow-Origin header field.

Advantages: All requests are supported, and there is no need to configure the front end

Disadvantages: incompatible with IE 8/9 and below

3. Nginx reverse proxy

The implementation principle is similar to Node middleware proxy, requiring you to build a nginx server for forwarding requests.

Nginx reverse proxy is the simplest way to cross domains. Nginx only needs to change the configuration to solve the cross-domain problem, support all browsers, support sessions, no code changes, and do not affect server performance.

Nginx configure a proxy server (domain name and domain1 the same, different port) as a jumper, reverse proxy access to domain2 interface, and can incidentally modify the cookie in the domain information, convenient for the current domain cookie writing, cross-domain login.

Advantages: The front and back ends do not need to be configured and are compatible

4. Node middle layer agent

Implementation Principle: The same origin policy is a standard that the browser must comply with. However, the same origin policy is not required if the server requests the same origin policy to the server. For proxy servers, you need to do the following steps:

  • Accept client requests.
  • Forwards the request to the server.
  • Get the server response data.
  • The response is forwarded to the client.

Use HTTP-proxy-Middleware to create a devServer similar to WebPack

Disadvantages: can’t pass cookies and other information, front-end need to add their own node layer through CORS or JSONP to handle cross-domain, back-end seems to need no change, I don’t like this way.