Cross-domain generation

You probably know that cross-domain is caused by the same origin policy of the browser. The so-called “same origin” means that the “protocol + domain name + port” are the same. Even if two different domain names point to the same IP address, they are not the same origin. The browser introduced the same origin policy mainly to prevent XSS, CSRF attacks.

One Click Attack/Session Riding (CSRF) cross-site Request Forgery (CSRF)

Under the same origin policy, when domain name A sends Ajax requests to domain name B, manipulates data such as cookies, LocalStorage, and indexDB, or manipulates DOM, JS is restricted, but requests for static resources such as CSS and JS are not restricted

Cross-domain solutions

1- JSONP [Front-end and back-end implementation]

Jsonp: Web pages can get JSON data dynamically generated from other sources by exploiting a vulnerability where

JSONP has the advantage of simple compatibility and can be used to solve the problem of cross-domain data access in mainstream browsers. The disadvantage is that only support for get methods is limited and insecure and may be subject to XSS attacks.

Declare a callback function whose name (such as show) is passed as a parameter value to the server requesting data across domains, and whose parameter is to fetch the target data (the data returned by the server).

Create a

Once the server receives the request, it needs to do something special: concatenate the name of the function passed in with the data it needs to give you into a string, for example: the name of the function passed in is show, and the data it prepares is show(‘ I don’t love you ‘).

Finally, the server returns the data to the client through HTTP protocol, and the client calls the callback function (show) previously declared to operate on the returned data.

2-CORS [Backend implementation]

CORS: Cross-domain resource sharing (CORS) is a mechanism; When a resource accesses another resource (the resource is placed in

Different domain name or different protocol or port), the resource will make a cross-domain HTTP request that both the browser and the server support;

1. The entire CORS communication is done automatically by the browser. When the browser discovers that AJAX requests cross sources, it automatically adds additional headers, and sometimes an additional request, but the user doesn’t notice;
2. The key to implementing CORS is the server, which can communicate across sources as long as it implements the CORS interface
3. The server handles different requests differently; There are simple and non-simple requests

3-Proxy [Front-end implementation is only suitable for local development environment]

// Configure the reverse proxy
    proxy: {
      '/api': {// The proxy mechanism is triggered when the address has/API
        target: 'http://192.168.91.150:3000'.// The address of the server to be proxied is not written to the API
        changeOrigin: true // Whether to cross domains
        pathRewrite: { '^/api': '/api' }// Rewrite the path}}Copy the code

4- Nginx

In Reverse Proxy mode, a Proxy server receives Internet connection requests, forwards the requests to the Intranet server, and returns the results to the Internet client. In this case, the proxy server acts as a reverse proxy server. In simple terms, the real server cannot be directly accessed by the external network, so a proxy server is required. The proxy server can be accessed by the external network and resides on the same network environment as the real server, of course, it may be the same server with different ports.

Configure the code that simply implements the reverse proxy
server {
        Listen on port 8080
        listen 8080;
        Localhost = localhost
        server name localhost;
        client max body size 1024M;
        # save the configuration file and start Nginx, so that when we access localhost, we can access localhost:8080
        location / {
                   proxy_pass http://localhost: 8080;
                   proxy set header Host $host:$server_port;
                   }
                   
    Any access to localhost:8080/ API will be forwarded to the real server address http://www.nb.com:8080
    # location ^~ /api {proxy_pass http://www.nb.com:8080; }

       }

Copy the code