Homology policy: Two urls are the same if their protocol, port (if specified), and host are the same.

JSONP (JSON with padding json)

${baseUrl}? ${baseUrl}? key1=value1&key2=value2&callback=yourfunc

<script> var script = document.createElement('script'); script.type = 'text/javascript'; SRC = '${baseUrl}? ${baseUrl}? ${baseUrl}? key1=value1&key2=value2&callback=yourfunc`; document.head.appendChild(script); Function handleCallback(res) {alert(json.stringify (res)); } </script>Copy the code

2. Iframe communication

PostMessage: window.postmessage (message)

ReceiveMessage: window.addEventListener(‘message’, receiveMessage, false)

Hash by value

1) Document.domain + iframe cross-domain restriction: The parent page a.HTML is embedded in iframe only if the primary domain is the same and the subdomain is different. You can set the document.domain of this page to be the same as that of the SRC subpage of the iframe tag. 2) Location. hash + iframe cross-domain communication via location.hash 3) postMessage + iframe cross-domain communicationCopy the code

3, CORS (Cross-origin Resource Sharing)

Request type: all HTTP request types

Limitations: Requires both browser and server support

Browsers classify CORS requests into two categories:

Simple requests are not simple requestsCopy the code

A simple request

A simple request must meet the following two conditions:

The request type is HEAD, GET, or POST. The content-type is a form or plain textCopy the code

The simple request browser will add Origin in the request header to indicate the source (protocol + domain name + port) from which the request is coming. If the domain name Origin specifies is within the server’s permission range, the response header will carry the following Access-Control fields

Access-control-allow-origin: type: string. Will bring. The value is the same as the Origin field in the request header or is * access-Control-allow-credentials: type: Boolean. Optional. Determines whether the browser allows carrying cookies to the server. If it is true still need XMR XMLHttpRequest object configuration. The prototype. The withCredentials = 'true' Access - Control - Expose - Headers: type: string. Specifies the additional request header fields allowed for the XHR object. Because the getResponseHeader() of the XMLHttpRequest object only gets the default fields. The access-control-allow-origin value cannot be * if the access-control-allow-credentials value is true.Copy the code

Non-simple request

A precheck Request will be sent. In addition to the Origin field, the precheck header will also carry access-Control-request-method and access-Control-request-method fields. Used to describe the request method and the request header to be carried separately. If allowed, the response header returned by the server carries the following Access-Control fields

Access - Control - Allow - the Methods: type: string. Will bring. Describe the method that allows cross-domain Access and whether to Allow cross-domain access-Control-allow-origin: type: string. Will bring. The value is the same as the Origin field in the request header or is * access-Control-max-age: type: number. Optional. Access-control-allow-credentials: type: Boolean Specifies the validity period of this pre-check request, in seconds. Optional. Determines whether the browser allows carrying cookies to the server. If it is true still need XMR XMLHttpRequest object configuration. The prototype. The withCredentials = 'true' Access - Control - Expose - Headers: type: string. Specifies the additional request header fields allowed for the XHR object. Because the getResponseHeader() of the XMLHttpRequest object only gets the default fields. The access-control-allow-origin value cannot be * if the access-control-allow-credentials value is true.Copy the code

6. Nginx reverse proxy interfaces cross domains

Nginx reverse proxy server

#proxy server {listen 81; server_name www.domain1.com; location / { proxy_pass http://www.domain2.com:8080; # Reverse proxy, cross-domain target interface proxy_cookie_domain www.domain2.com www.domain1.com; # change cookie domain name index index.html index.htm; # When accessing Nignx with middleware proxy interface such as Webpack-dev-server, there is no browser participation, so there is no source restriction. Add_header access-Control-allow-origin http://www.domain1.com; * add_header access-control-allow-credentials true; * add_header access-control-allow-credentials true; }}Copy the code

Nodejs middleware

Node + Express + HTTP-proxy-middleware sets up a proxy server

Var express = require('express'); var proxy = require('http-proxy-middleware'); var app = express(); App. Use ('/', the proxy ({/ / agent cross-domain target interface target: 'http://www.domain2.com:8080', changeOrigin: True, // Modify the response header to cross-domain and allow cookie onProxyRes: function(proxyRes, req, res) { res.header('Access-Control-Allow-Origin', 'http://www.domain1.com'); res.header('Access-Control-Allow-Credentials', 'true'); }, // rewrite: 'www.domain1.com' // can be false to indicate no change}); app.listen(3000); console.log('Proxy server is listen at port 3000... ');Copy the code

8 the websocket.

Socket. IO implements two-way communication between front-end and NodeJS

What is simplex, half duplex, full – time communication?

Information can only be transmitted one-way as simplex; Information that can be transmitted in both directions but not at the same time is called half duplex; When information can be sent both ways simultaneously, it is called full-duplex.