background

Cross-domain is caused by the same origin policy of the browser. It means that the URL requested by the page must be in the same domain (that is, the domain name, port, and protocol) as the URL on the browser. This is to prevent the interface under one domain name from being called by pages under other domain names. It is a security restriction imposed by browsers on JavaScript.

This approach is well-intentioned, but it often causes problems for front-end developers in the process of application page development. During front-end development, static resources are stored on the local PC. These resources are usually accessed using IP addresses (127.0.0.1) or localhosts, which are inconsistent with the domain name of the online server. Therefore, service ports cannot be invoked successfully.

There are two common solutions to cross-domain problems:

  • JSONP: By taking advantage of the cross-domain nature of the Script tag, functions of the current script can be called back directly in cross-domain scripts.

  • CORS: The server sets the access-Control-allow-Origin value in the HTTP response header to remove the cross-domain restriction.

But both of these cross-domain solutions have a fatal flaw in that they rely heavily on the assistance of the back end. Every interface encountered in development requires special processing in advance from the back end. And even if the back end is willing to help, some interfaces are not readily available (for example, interfaces that are already live in a formal environment). In any case, cross-domain solutions that rely on back-end assistance limit the pace of front-end development to some extent.

Is there a cross-domain solution that can be implemented independently of the front end? Yes, we can use “proxy” or “reverse proxy” techniques to implement cross-domain problems in development.

Proxy and reverse proxy

The agent

Agent, also known as the forward agent, which means a is located in the client and the target server (target server) between the server and to get content from the target server, the client send a request to the agent and specify the target (target server), then transfer agent to the target server request and will get back to the content of the client.

Colloquially:

“Client” can be regarded as an underworld boss, “target server” can be regarded as a restaurant, “proxy server” can be regarded as a younger brother.

  • “Big brother” want to eat the restaurant sauce spareribs rice, let “younger brother” to buy, “younger brother” went to “hotel” to a sauce spareribs rice.

  • “Hotel” sauce spareribs rice to do, to the “younger brother” hand, “younger brother” finally put the sauce spareribs rice to the “big guy”.

To put it bluntly, little brother is just an errand boy, acting for the big cheese.

Data flow:

  • Data request process: browser – proxy server – target server

  • Data return process: target server – “proxy server -” browser

Application:

The most classic application is the Science Web: I’m a domestic user, I can’t access Google, but I can access a proxy server in Hong Kong. This proxy server in Hong Kong has access to Google, so I first send the request to that proxy server, tell it THAT I need to access Google, the proxy server picks up the content, and then returns it to me.

It’s like, when the big guy was arrested and put in prison, he couldn’t go out to buy sauce chops, so he had to ask his younger brother to buy them.

The reverse proxy

Bco explains as follows:

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.

Data flow:

  • Data request process: browser – “[Reverse proxy server -” data processing server]

  • Data return process: [Data processing server – reverse proxy server] – “browser

Colloquially:

The “browser” can be seen as a diner, and the “reverse proxy server -” a server that processes data “as a whole can be seen as a restaurant, where the” reverse proxy service “is equivalent to a waiter taking an order. A server that processes data can be interpreted as a cook.

  • The “diner” comes to the “restaurant” and orders the “waiter”, but the waiter doesn’t actually cook the food, he orders the “chef” to do the cooking.

  • The “cook” cooks the food and gives it to the “waiter”, who takes it to the “diner”.

To the outside world, the “proxy server” and the “server that processes the data” are one entity. For example, a diner would go to a restaurant instead of a chef (i.e. for the browser, the reverse proxy server takes care of the rest). Specific hotel how to operate, is transparent to the diner. It is possible that a server acts as both server and cook (i.e. the reverse proxy server is the same PC as the server that processes the data).

Plus, without a reverse agent, it’s like asking for food from the chef without a waiter. For example, if you’re hungry, it’s just as good to ask your mom to cook (minus the steps of placing an order).

To compare

  • In terms of use:

    • The typical use of a forward proxy is to provide LAN clients within a firewall with access to the Internet. Forward proxies can also use buffering features to reduce network utilization.

    • Reverse proxies are typically used to provide load balancing for multiple servers on the back end, or to provide buffering services for servers on the back end that are slower.

  • In terms of security:

    • A forward proxy allows clients to access any web site through it and hide the client itself, so you must take security measures to ensure that only authorized clients are served.

    • Reverse proxies are transparent to the outside world, and visitors do not know that they are accessing a proxy.

  • From the perspective of users:

    • The forward proxy is configured on the browser side, independent of the server side, and can even be hidden from the server side.

    • The reverse proxy is configured on the server and transparent to the browser.

Cross-domain implementation using proxies

Realize the principle of

Configure the forward proxy server to point to resources on the developer’s host when retrieving non-interface data. When accessing an interface, access the back-end interface data.

Equivalent to big guy let younger brother sauce spareribs rice inside the rice and sauce spareribs to buy separately, rice home cooking, sauce spareribs to buy a hotel.

Program running procedure

  • The browser visits the page, assuming visiting taobao page: taobao.com/index.html (assuming this page calls the interface of taobao.com/api/getNew to get the latest goods)

  • The taobao.com/index.html request goes through the proxy server, and according to the configuration, the index.html page requests 127.0.0.1:3000

  • 127.0.0.1:3000 returns the index.html file to the browser.

  • The browser runs the index.html page and initiates the taobao.com/api/etNew request.

  • The taobao.com/api/getNew request passes through the proxy server, but because there is no special configuration for the interface, it normally accesses the interface on the Taobao server.

  • After receiving the request taobao.com/api/getNew, the Taobao server checks the hosts field of the request header and finds that it is Taobao.com without cross-domain, and returns the result to the proxy server.

  • The proxy server takes the results and returns them to the browser, which parses and displays them.

Proxy configuration (using Charles under MAC as an example)

  • Charles -> Tool ->Map Remote

  • Click Add to add the mapping.

  • Click on the? Symbol to go to the configuration rule page.

Note:

  • The configuration items matching taobao.com/api/ should be placed before those matching taobao.com/, so that the matching API has a higher priority. Otherwise only the taobao.com/* configuration will be matched.

  • If the interface request involves HTTPS, you need to install Charles certificate on your computer in advance. For details, click here.

  • Chrome browser requests do not go through Charles proxy, so you need to set the network Settings on your computer and set the proxy address to Charles.

  • Wechat developer tools are not system agents, need additional Settings. Wechat developer tools – Settings – Proxy – Point to proxy server

Cross-domain implementation using reverse proxies

Reverse proxies need to use Nginx, which is described in detailhere

Realize the principle of

The principle is the same, but the processing end is different. The reverse proxy performs processing on the server side. First modify the hosts file, the domain name to the developer’s computer itself, disguised as a server, and then forward different requests through Nginx, the static resources to the developer’s local computer resources, the interface to the actual server.

It is equivalent to setting up a restaurant in the underworld downstairs. When you go downstairs to buy rice with soy spareribs, you cook the rice by yourself and secretly go to another restaurant to buy soy spareribs.

Proxy configuration

  • Set the hosts file to point the target domain name to the local host.

  • Edit nginx configuration to point to the corresponding address for different resource requests. Similarly, point static resources to the native service and interfaces to the real server.

Program running procedure

  • Browser to visit the page, suppose to visit taobao page: taobao.com/index.html

  • Domain name resolution after the hosts file is configured, the taobao.com domain name points to 127.0.0.1, and a request is sent to the local host.

  • Nginx receives the taobao.com/index.html request and, according to nginx configuration, will forward the request to 127.0.0.1:3000.

  • The browser takes the index.html file and sends the taobao.com/api/getNew request

  • Nginx receives the taobao.com/api/getNew request and, according to nginx’s configuration, forwards the request to the real Taobao server.

  • The Taobao server returns the data to Nginx, which then returns it to the browser for execution.

Simple contrast

  • Using Charles and other forward proxy methods is relatively simple and requires less knowledge. But at the same time, it is less configurable and more suitable for small projects.

  • Reverse proxies using Nginx are a bit more complex and require basic nginx configuration. However, it has strong configurability, supports URL regular matching and setting priority, and is suitable for complex projects

And finally, a photo