Multiple solutions across domains

This is the 6th day of my participation in the August More Text Challenge

preface

Before we talk about solutions, we should definitely talk about the concept of cross-domains.

Cross-domain Because of the same origin policy of the browser, to prevent cross-site scripting attacks, client scripts are prohibited from invoking resources across documents or scripts in different domains.

Same origin: protocol + domain name + port (see figure below)

The same origin is the core and most basic security function of the browser. Without the same origin policy, the browser is vulnerable to XSS and CSFR attacks.

Therefore, a different protocol, domain name, or port is considered cross-domain.

To compare whether the following addresses are cross-domain: original address: https://www.baidu.com/

Do you see something like this on the console during development:

No ‘Access-Control-Allow-Origin’ header… So that’s cross-domain, so let’s talk about cross-domain solutions

Common cross-domain solutions

1. ProxyTable of vue development environment

ProxyTable is a cross-domain proxy server service provided by vuE-CLI scaffolding in development mode. Based on (http-proxy-Middleware plug-in). ProxyTable is a proxy server provided by WebPack in the development environment (using HTTP-proxy-Middleware).

Configuration:

To learn more

2.CORS

CORS is a W3C standard, which stands for “Cross-origin Resource Sharing”. It allows the browser to issue XMLHttpRequest requests across source servers, interface request header details

• You can customize rules to control whether to allow cross-domains on the server
• Supports various request modes

To view more

3. Nginx reverse proxy

Use nginx reverse proxy to cross-domain as non-cross-domain, support a variety of request methods.

Reverse proxy, in fact, the client’s agent is no perception, because the client does not require any configuration can access, we only need to send the request to the reverse proxy server, the reverse proxy server to select the target server to get data, returned to the client, the reverse proxy server and the target server is a server, The proxy server address is exposed and the real server IP address is hidden.

To view more

4. Solve cross-domain problems through JSONP

This is an older solution, SRC for our script tag or SRC for our img tag, or href for the link tag they’re not restricted by the same origin policy. This is done by loading and executing other domain events via script tags.

Disadvantages: Supports only GET and HTTP requests; After the request is complete, the result can be returned by calling callback. If the request fails, no status code is returned.

To view more

5. PostMessage to resolve cross-domain

The message API introduced in HTML5 can solve these problems more easily, efficiently, and safely. The postMessage() method allows scripts from different sources to communicate asynchronously in a limited manner, enabling cross-text file, multi-window, cross-domain messaging.

The postMessage(data, Origin) method takes two arguments

1. Data: The data to be passed. According to the HTML5 specification, this parameter can be any basic type of JavaScript or a copiable object. So we need to use the json.stringify () method to serialize the object’s parameters when passing them, a similar effect can be achieved by referencing json2.js in earlier versions of IE.

2. Origin: String argument that specifies the source of the target window, protocol + host + port number [+URL]. The URL is ignored, so it can be omitted. For security reasons, the postMessage() method will only pass message to the specified window. This can be passed to any window, set to “/” if you want to specify the same origin as the current window.

To view more

Nodejs middleware proxy is cross-domain

If the back end is written with [node.js}(nodejs.cn/learn), you can…

var express =require('express');
var proxy = require('http-proxy-middleware')
app.use('/',proxy({target:'https://www.baidu.com',changeOrigin:true}));
app.listen(3000);

Copy the code

More and more

7.WebSocket protocol is cross-domain

WebSocket is a network communication protocol.

More and more

More Solutions

Other cross-domain solutions available online are not covered here

More and more

summary

The above mentioned cross – domain concept and common solutions to cross – domain. In fact, I have contact with the first five, the last few are out of the search, counted as new learning methods, but lack of practice.

If you have anything to add or explain, please leave a comment.

Practice makes perfect! .