** This is the 14th day of my participation in the August Changwen Challenge. For details, see: August Changwen Challenge ** W

What is cross-domain?

1. Same-origin policy

The cross-domain problem is caused by the browser’s same-origin policy.

Same-origin policy: An important security policy that restricts how an Origin document or script it loads can interact with the resources of another source. It can help block malicious documents and reduce the media that may be attacked.

The following error is received when you cross domains

2. Same-origin example

So what is homology? Let’s look at the components of a URL first

http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument

Only when the

Protocol, domain, and port must be the same.

It’s cognate.

The following protocols, domain names, and ports must be the same.

www.qihh.com:80/a.js

www.qihh.com:80/b.js

It doesn’t matter how similar these look, they’re not homologous.

www.qihh.com:8080

www2.qihh.com:80

Notice here, because I’m writing port to highlight the difference between ports. By default port 80 can be omitted for HTTP and 443 for HTTPS.

How to solve cross-domain problems?

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 source servers. When a resource requests a resource from a “different domain, protocol, or port” from the server where the resource itself resides, the resource initiates a “cross-domain HTTP request” **.

“Browser Support”

Use JSONP when using Internet Explorer <=9, Opera<12, or Firefox<3.5 or older.

Nginx reverse proxy

Nginx is a reverse proxy. We can see an example of nginx configuration:

server {

    listen 8033;/ / port
    server_name bj01.reocar.ud_client.com;// The domain name of the proxy
    / / log
    access_log /tmp/udesk.imclient.nginx.access.log;
    error_log /tmp/udesk.imclient.nginx.error.log;

    location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
        expires 90d;
        add_header Vary "Accept-Encoding";
    }
    # location ^~ /im_client {proxy_pass http://reocar.ud.com/im_client/; } location ^~ /static_cmps { proxy_pass http://****-rd-bj-01.qihh.cn/static_cmps;
    }
    location ^~ /spa1 {
        proxy_pass http://****-rd-bj-01.qihh.cn/spa1;
    }
    location ^~ /im_client {
        proxy_pass http://localhost:3001/;
    }
    location ^~ /****_im { proxy_pass http://****-rd-bj-01.qihh.cn/****_im; }}Copy the code

We can see that the agent’s request path will redirect the request to the server address of our agent’s proxy_pass. Thus we implement the nGINx proxy.

// some nginx operations,
/ / restart
nginx -s reload
/ / start nginx
nginx start
/ / stop nginx
nginx stop

Copy the code

JSONP

JSONP mainly takes advantage of the fact that script tags have no cross-domain restrictions. The principle of JSONP is simple. Many HTML tags with the SRC attribute, such as the familiar IMG image tag, can request content across domains. Similarly, script tags can be used to execute cross-domain javascript code. With this code, we can implement the front-end cross-domain request data.

Use restrictions

Only the GET method is supported. If you want to use the full REST interface, use CORS or another proxy.

Let’s take a look at the simplest example of JSONP: HTML code that can be opened directly in the browser

<html>
  <body>
    <div>
      receive <span id="qwerty"> </span>
    </div>
  </body>
  <script>
    function callfun(data) {
      document.getElementById('qwerty').innerHTML = data;
    }
  </script>
  <script src="Http://127.0.0.1:10010/js? call=callfun"></script>
</html>
Copy the code

The back end uses egg.js, and the core code is just the ctx.body sentence

'use strict';

const Controller = require('egg').Controller;
class JsonpController extends Controller {
  async index() {
    const { ctx } = this;
    console.log(ctx.query);
    ctx.set('content-type'.'text/javascript');
    ctx.body = ctx.query.call + '("nihao")'; }}Copy the code

To let the back end know the name of our front-end callback function, we add the call=callfun parameter to the script request. The back end receives ctx.query.call and merges it with ‘(“nihao”)’. Finally, the string callfun(“nihao”) is formed and passed to the front end.

This “Nihao” is the data that we transfer from the back end to the front end across domains.

The callfun function processes this data and displays it on the screen.

Websocket

The WebSocket specification defines an API for establishing a “socket” connection between a Web browser and a server. Simply put: there is a persistent connection between the client and the server, and both can start sending data at any time.

This approach does not use HTTP response headers per se, so there are no cross-domain restrictions