What is cross-domain

  • When a protocol, domain name, or port is different from the current page address, it is cross-domain
  • The most common cross-domain is a web page from one domain name that calls resources from another domain name

Why cross domains

Just to be safe

Browsers use the same origin policy to restrict JS, prevent malicious users from obtaining illegal data, and prevent most XSS attacks (user interface injection of JS scripts).

  • The browser’s two same-origin policies can cross domains

    1. DOM homology policy: DOM operations on pages from different sources are prohibited, including IFrame and Canvas. Iframes from different sources prohibit data interaction. Canvas containing different sources will be polluted and cannot be operated

    2. XmlHttpRequest: Disables data interaction between different sources to prevent CSRF attacks

    The cross-domain request browser reported an error

    • The CROS standard defines how the browser and server communicate when accessing a resource across a domain. When a browser makes a cross-domain request, it communicates with the server with additional headers to determine whether the request is approved or not (all browsers except IE10 support this standard).

  • There are two types of cross-domain requests: simple and non-simple

A simple request

  • Request method

    • GET
    • POST
    • HEAD

  • Header information

    • Accept
    • Accept-Language
    • Content-Language
    • Last-Event-ID
    • Content-type // The field Type cannot be Application /json

  • A simple request is one that satisfies both of these two points, and all other requests are non-simple requests

  • When a browser sets a cross-domain request to a simple one, it appends the Origin field to the header. This field informs the server of the Origin of the request (protocol, domain name, port), and the server checks the Origin of the request

  • If the server passes the request source, the browser responds with several fields attached

    1. Access-control-allow-origin: the server agrees with the source of the request, and if it is *, it represents all sources
    2. Access-control-allow-credentials: Browsers can send cookies to the server for authentication, and the browser can receive replies normally

  • If the server does not agree to the request, the server returns data normally, no attachment is attached, the browser does not have access-contril-allow-origin, the status code is various, maybe even 200

Non-simple request

  • For non-simple requests, such as PUT or DELETE requests, and content-type requests with application/ JSON values, the browser will send a pre-check with OPTIONS before a cross-domain request. The header contains not only the Origin field but also the header information

    1. Access-control-request-method tells the server how to make cross-domain requests
    2. Access-contril-request-headers, which requires additional information when the browser makes cross-domain requests

  • When the server receives a prechecked request, it checks not only the source, but also the request method and header fields

  • If the server agrees to the request, access-Control-Allow-Origin is appended to the HTTP response, stating that the server agrees to the source of the request. This means that the server has approved the request and each subsequent cross-domain request will proceed normally

  • If the server does not agree to the request, the server responds normally without attaching anything, the browser does not see access-Control-Allow-Origin, and does not send a cross-domain request and report an error

How to solve cross-domain problems

  1. JSONP (elimination)

    • Tags such as IMG and script have no cross-domain restrictions, so script tags can be created dynamically to make cross-domain requests through the SRC attribute and store the source of the cross-domain request
function  (data) {
    console.log(data)
}
var body = document.getElementByTagName('body')[0]
var script = document.createElement('script')
script.type = 'text/javascript'
script.src = 'http://example.com?jsonp=cb'
body.appendChild(script)
Copy the code

The returned JS script is executed directly and is compatible with all browsers, but has drawbacks

A. The request can only be made in GET mode, which has limited parameter length and poor security

B. The back end needs to know the CB structure of the front end and the names of parameters and callback functions

C. The backend can be executed only after parameters and callback functions are combined

D. JSONP has become obsolete with the rise of RESTful, which includes GET, POST, PUT, PATHC, and DELETE

  1. Server proxy CROS(common)

    • CROS stands for Cross Origin Resource Sharing
    • CROS requests are no different from AJAX requests on the client side, where additional information is added on the server sideAccess-Control-Allow-Origin
    • The server has no cross-domain restrictions and can ask the server to request cross-domain resources and then return them to the client. The client sends the cross-domain browser to the server. The server requests the resources and then sends them to the client
    • The browser sends a pre-request using OPTIONS to obtain the HTTP method supported by the server for cross-source requests. After confirming that the server allows cross-source requests, the browser sends the request using the actual HTTP request method
    • CROS does not support IE8, IE9

  2. Build the middle layer (common)

    • Converts requests from different sources into same-origin requests
    • By building the middle layer, of course, can be Java, can also be Node.js, by forwarding the server request, then the front-end request is forwarded, so it is a good solution to the cross-domain problem
    • Because of the additional layer of intermediate forwarding, both the network overhead and the performance load will have a certain impact

  3. Nginx reverse proxy

    • Set up a relay Nginx server to forward requests
    • Naginx determines when it parses the URL and forwards the request to the specific server

Nginx.conf adds the following code:

server { listen 8000; server_name svsapi.svsmarkets.com; # root /var/www/SFWEBSITE/API/public; index index.php index.htm index.html; location ~ \.php$ { add_header Access-Control-Allow-Origin *; // add_header access-control-allow-headers content-type,access-token,language,Cookie; // key add_header access-control-allow-method GET,POST,OPTIONS; / / the key root/var/WWW/SFWEBSITE/API/public; Fastcgi_pass 127.0.0.1:9001; fastcgi_index index.php; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; include fastcgi_params; } location / { if (! -f $request_filename){ rewrite ^(.*)$ /index.php? $1 last; break; } } error_log /usr/local/nginx/logs/error_svsapi_svsmarkets_com_log; access_log /usr/local/nginx/logs/access_svsapi_svsmarkets_com_log; }Copy the code
  1. In VUE, the front end is separated from the back end, and the front end accesses the back end interface across.

Fill in the vue.config.js file in the root directory of your project with the following code:

A. If you do not have the vue.config.js file, create one yourself. Fill in the following code.

B. If the domain name is set here and the axios request background is used, the axios baseUrl does not need to set the domain name.

C. If port 8080 is used by other applications, configure the port based on the port displayed in the terminal window after the project is started.

D. ‘/ API ‘is the interface that accesses the background interface. Only’ API ‘can be proxy. Such as: http://192.168.1.52/api/home/change/park

module.exports = { devServer: { host:'localhost', port: 8081, proxy: { '/api': { target: 'http://192.168.1.52',// Domain name to be cross-domain secure: false, // For HTTPS interfaces, if you want to configure this parameter changeOrigin: true,// Allow cross-domain}}}, lintOnSave: false}Copy the code