“This is the third day of my participation in the November Gwen Challenge. See details of the event: The last Gwen Challenge 2021”.

Cross-domain is a perennial issue of front-end and back-end syndication. Today, I’ll give you a brief overview of the front-end cross-domain approach and how local proxies work.

What is cross-domain

First, the browser has the Same Origin policy, which simply means that web pages with different hosts, ports, or protocols are not allowed to obtain resources under another domain name. Different sources are defined as different hosts, ports, and protocols (HTTP vs HTTPS).

Front end cross-domain approach

  1. Using local proxy servers (scaffolding plug-ins, Node plug-ins, etc.), there is no same-origin policy mechanism and cross-domain detection will not be triggered. This is why postman does not trigger a cross-domain error;

  2. Nginx reverse proxy, similar to a local proxy server, but does forwarding on the target server;

  3. PostMessage: across domains between pages of the same browser, postMessage specifies the domain name and destination domain to listen to message sending and receiving.

  4. Iframe +location.hash: cross-domain communication between pages of the same browser. If A wants to communicate with B across domains, a loads THE IFrame of B using the hash of the same middle page C, and B similarly forwards the response to C. C can access all objects on page A and pass the response to A;

  5. iframe+window.name: Create an iframe of the proxy domain, use the SRC attribute of the iframe to load the outer domain, and save the window.name of the outer domain in the proxy domain. Ensure that the data is not obtained by other domains and realize window.name from the outer domain to the local region;

  6. Iframe +document.domain, mainly the same master domain name, the master child window page forcibly modify document.domain implementation and the main window homology;

  7. Jsonp: A get request is made with a script tag. The server receives the callback passed by the request parsing front end and passes data to the callback.

  8. Other protocols such as Websocket.

Among them, 3,4,5 and 6 all use Bom API to achieve cross-domain, so only cross-domain between pages can be realized, suitable for the direct communication between the external link page of the same site and the main page. From the perspective of the front and back end interface requests, it is king to let the back end set the server CORS interface and trigger the CORS process (reduce the front-end workload). For more information, check out cross-domain resource sharing

Immature view: Pure front-end cross-domain is a false proposition from the interface request level, it is difficult to bypass the same origin mechanism without server CORS (the easier it is, the less secure it is).

Local Proxy Process

When I tried to call an interface deployed under B.com (server not handled by CORS) at a.com, the browser blocked me and threw me a COR error: Access to XMLHttpRequest at ‘target.com’ from origin ‘http://localhost:8001’ has been blocked by CORS policy.

Using Vue CLI as an example, add devServer to Vue.config.js

  proxy: {      '/api': {        target: 'b.com',        changeOrigin: true,        pathRewrite: {          '/api': '',        },    }
Copy the code

Then add to the request such as b.com/list axios.get(‘ API /list’) to make the request successful.

Principle: When initiating a request, the browser will send the request to the proxy server, and then the proxy server will change the request to b.com/list and send it to the server of B.com. The essence of cross-domain is the interception of the Ajax engine, and the Ajax engine will not intercept.

episode

Today, I want to change the origin in the request header, but I find that the origin is still localhost

 proxy: {      '/api': {        target: 'b.com',        changeOrigin: true,        pathRewrite: {          '/api': '',        },        onProxyReq: function (request) {          request.setHeader('origin', 'b.com')        },      }, }
Copy the code

I thought the onProxyReq event did not trigger, so I searched with doubts. After reading the answer, I knew that the onProxyReq event of proxy configured in VUE-CLI 3.0 did not trigger. The process of the local proxy server is that the localhost browser sends a request to the proxy server, the proxy server changes the request header Origin, and then sends the request to b.com, and then the real server returns the request to the browser. The console can’t see whether the middleman is making money or not.

conclusion

The local proxy server is a common means in the development stage, and the online environment still needs the server to set CORS.