Why can’t XMLHTTPRequest request resources across domains

This article has participated in the third “topic writing” track of the Denver Creators Training Camp. For details, check out: Digg Project | Creators Training Camp third is ongoing, “write” to make a personal impact

What is XMLHttpRequest?

The XMLHttpRequest (XHR) object is used to interact with the server. With XMLHttpRequest, you can request a specific URL to retrieve data without refreshing the page. This allows the web page to update parts of the page without affecting the user’s actions.

XMLHttpRequest is widely used in AJAX programming.

What is cross-domain?

Cross-domain means that the browser cannot execute scripts from other sites. It is caused by the same origin policy of the browser, a security restriction that the browser imposes on JavaScript.

What is the same origin policy?

The same origin policy is an important security policy that restricts how an Origin document or the scripts it loads can interact with resources from another source. It can help block malicious documents and reduce the number of vectors that can be attacked.

The following table gives an example of a comparison with the source at the URL https://juejin.cn:

Why not cross domains?

The same-origin policy ensures network security and prevents data theft.

The following three behaviors will be restricted:

• Cookie, LocalStorage, and IndexDB cannot be read
• DOM not available
• AJAX requests cannot be sent

How to solve cross-domain problems?

CORS

Cross-origin Resource Sharing (CORS) for short.

Generally, the Origin header is read from the request and contains a response header, indicating that the request source is allowed. For example, consider an application that receives the following requests:

GET /sensitive-victim-data HTTP / 1.1
Host: vulnerable-website.com
Origin: https://malicious-website.com
Cookie: sessionid=...
Copy the code

It then responds:

HTTP / 1.1 200 OK
Access-Control-Allow-Origin: https://malicious-website.com
Access-Control-Allow-Credentials: true
...
Copy the code

These header declarations Allow Access from the request domain (malicious-website.com) and the cross-domain request can contain cookies (Access-Control-allow-credentials: true) and will therefore be processed in the session.

Nginx proxy

Nginx configuration resolves iconFONT across domains

Browser cross-domain access js, CSS, and img conventional static resources are the same-origin policy permission, but iconfont font file (eot | otf | the vera.ttf | woff | SVG) exception, at this time in nginx server to add the following configuration static resources.

location / {
  add_header Access-Control-Allow-Origin *;
}
Copy the code

Nginx reverse proxy interfaces cross domains

Cross-domain principle: The same Origin policy is a security policy of the browser, not a part of the HTTP protocol. The server invokes the HTTP interface only using THE HTTP protocol, and does not execute JS scripts. There is no need for the same origin policy, so there is no crossing problem.

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.

Nginx configuration:

# proxy server
server {
    listen       81;
    server_name  www.domain1.com;

    location / {
        proxy_pass   http://www.domain2.com:8080;  # Reverse proxy
        proxy_cookie_domain www.domain2.com www.domain1.com; # change the domain name in cookie
        index  index.html index.htm;

        # When accessing Nignx using middleware proxy interfaces such as Webpack-dev-server, there is no browser participation, so there is no source restriction, the following cross-domain configuration can not be enabled
        add_header Access-Control-Allow-Origin http://www.domain1.com;  # If the current end is cross-domain only without cookies, the value can be *
        add_header Access-Control-Allow-Credentials true; }}Copy the code

Nodejs agent

Take advantage of the fact that requests between servers do not cross domains

• Webpack proxy configuration
• Vue-proxy is configured on the CLI

WebSocket

WebSocket Protocol is a new protocol for HTML5. It implements full duplex communication between browser and server, and allows cross-domain communication. It is a good implementation of server push technology.

// Initialize a WebSocket object
var ws = new WebSocket("ws://localhost:9999/echo");

// The web socket connection was successfully established
ws.onopen = function () {
  // Use send() to send data
  ws.send("Send data");
  alert("Data in transit...");
};

// The event is triggered when receiving data from the server
ws.onmessage = function (evt) {
  var received_msg = evt.data;
  alert("Data received...");
};

// Failed to disconnect the Web socket
ws.onclose = function () {
  alert("Connection closed...");
};
Copy the code

conclusion

• Different domain names, protocols, and ports may cause cross-domain problems
• Common approaches to solving cross-domain problems should be kept in mind
• This article is sketchy, so feel free to add details in the comments section