Homologous cross domain and front end solution cross domain

The same-origin policy

If the protocol, domain name, and port number are the same in the browser, the browser indicates the same source

Netscape introduced the same origin policy into the browser in 1995. It 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.

Cross domain

Ajax requests such as those from the server that violate the same origin policy are cross-domain requests

There are several common solutions

1. The json across domains

Because script tags do not exist across domains, JSONP can send get requests to the server, and the server saves the data returned by the server in the callback function for use by the front-end page

2. The websocket protocol

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. The native WebSocket API is not very convenient to use. We use socket. IO, which encapsulates the WebSocket interface well, provides a simpler, flexible interface, and provides backward compatibility for browsers that do not support WebSocket.

3. The Vue React engineering project uses a proxy

Sample Webpack code

module.exports = {
    devServer: {
        proxy: {
          "/api": {  // Intercepts access to the previous path of/API in the link
            target: "http://47.108.203.155:8080".// Forward to the target server
            changeOrigin: true.pathRewrite: {
              "/api": "".// Because the/API is specially added by me, this redirects/API to null},},},}}Copy the code