I believe that front-end development must have this problem.

What is cross domain

Cross domain is the behavior of the browser. The cross domain problem is actually caused by the browser's homologous strategy. Homology policy is an important security policy, which is used to restrict how an origin document or its loaded script can interact with resources from another source. It can help block malicious documents and reduce the media that may be attacked.
The following error will be reported when cross domain:

The following protocols, domain names and ports are consistent.

http://www.example.com:80/a.js

http://www.example.com:80/b.js

It's no use looking like the following. They are not homologous.

http://www.example.com:8080

http://www2.example.com:80

be careful:

Note here that ports are written here to highlight the differences between ports. By default, port 80 can be omitted for HTTP and 443 for https. Don't make a joke Then, you tell me http://www.example.com:80 and http://www.example.com It's not homology. They're the same thing.

http://www.example.com:80\===http://www.example.com

https://www.example.com:443\===https://www.example.com

How to solve cross domain problems

1.JSONP
JSONP mainly uses the feature that script tags have no cross domain restrictions.

Use restrictions

Only GET methods are supported. If you want to use a complete REST interface, please use CORS or other proxy methods.
Process analysis

1. The front end defines the parsing function (for example, jsonpCallback=function() {...})

2. Wrap the request parameters in the form of params and declare the execution function (for example, cb=jsonpCallback)

3. The back end obtains the jsonpCallback declared by the front end and passes it to the front end by taking parameters and calling the execution function.
2.CORS
Cross domain resource sharing (CORS) is a mechanism that uses additional HTTP headers to tell browsers that Web applications running on an origin (domain) are allowed to access specified resources from different origin servers. When a resource requests a resource from a domain, protocol or port different from the server where the resource itself is located, the resource will initiate a cross domain HTTP request.
This method is usually used in our projects, mainly the back-end configuration

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://foo.example
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400
Vary: Accept-Encoding, Origin
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain

In cors, there will be the concepts of simple request and complex request.
3.Node forward proxy
The idea of proxy is to make use of the characteristic that the server request will not cross domain, so that the interface and the current site are in the same domain.
a. Proxy in cli tool

// Webpack (4.x)
 devServer: {
    port: 8000,
    proxy: {
      "/api": {
        target: "http://localhost:8080"
      }
    }

// config/index.js
// Vue-cli 2.x

...
proxyTable: {
  '/api': {
     target: 'http://localhost:8080',
  }
},

// Vue-cli 3.x
module.exports = {
  devServer: {
    port: 8000,
    proxy: {
      "/api": {
        target: "http://localhost:8080"
      }
    }
  }
};

4.Nginx reverse proxy

// Configure nginx
server {
        listen 80;
        server_name local.test;
        location /api {
            proxy_pass http://localhost:8080;
        }
        location / {
            proxy_pass http://localhost:8000;
        }
}

5.Websocket
This method essentially does not use the HTTP response header, so there is no cross domain restriction.
6.window.postMessage
window. The PostMessage () method enables cross source communication safely. Generally, for scripts with two different pages, the two scripts can communicate with each other only when the page executing them is located in the same protocol (usually https), port number (443 is the default value of https), and host (the modulus Document.domain of the two pages is set to the same value). window. The PostMessage () method provides a controlled mechanism to circumvent this restriction, which is safe as long as it is used correctly.
purpose
1. Data transfer of page and its open new window

2. Message passing between multiple windows

3. Page and nested iframe messaging
7. The browser opens cross domain (the ultimate solution)
In fact, the cross domain problem is the browser strategy, and the source is him. Can you turn off this function?

The answer is yes.

Note: because the browser is the portal to many web pages. Can we also open and debug our development page with a separate special host browser like the client. For example, take chrome canary as an example. This is the browser I specially debug the page, and I won't use it to access other web URLs. Therefore, it is also relatively safe. Of course, this method is only recommended when you are really suffering from cross domain crash. After use, please open it in a normal way to avoid doing other things in this mode.

Why cross domain?

At the very beginning, we learned that cross domain only exists on the browser side. The browser provides access to the web. We can open many pages in the browser. It is such an open form, so we need to limit it. For example, when the forest is large and there are all kinds of birds, we need to have a unified specification to make an agreement in order to ensure this safety.

• 1. Restrict requests from different sources
• 2. Restrict dom operations