preface

When a request URL protocol, domain name, port between any of the three is different from the current page URL will cause cross-domain. There are two ways to solve cross-domain problems:

  • Forward proxy: instead of “client”, “a proxy server” interacts with the “target server”, the proxy client.

Purpose: To hide the client’s real IP address and access foreign websites.

  • Reverse proxy: “a proxy server” instead of the “target server” interacts with the “client”, the proxy server

Purpose: To hide the real IP address of the server and provide load balancing, that is, to point to an idle server in the back-end. We usually solve cross-domain in development by using the principle of reverse proxy. For example, vUE project configure proxy proxy or nginx configure reverse proxy.

1. Vue local project proxy Reverse proxy

Configure proxyTable in the index.js file in the config folder.Visit address:http://localhost:8080

Browser Display pathhttp://localhost:8080/index

The actual path after passing the reverse proxyhttp://172.0.0.1:8700/index

Vue Proxy The reverse proxy replaces only the domain name of the original requested address, not everything before the identifier.

2. Nginx reverse proxy

(1) Access address reverse proxy Access the address through the localhost reverse proxyhttp://localhost:8080

Direct use ofThe interface for the http://localhost:8080 access request is invalid.

(2) Request address reverse proxyIn the figure, proxy_pass is the IP address, port and identification identifier of the background computer request, and /weixinapi is the identifier. When /weixinapi/ is detected in the request path, proxy_pass will replace the content before this identifier, and the browser will display the request pathhttp://localhost/weixinapi/demandpagelecturedemandThe actual path after passing the reverse proxyhttp://172.0.0.1:8711/weixinapi/demandpagelecturedemand

3. Summary

There are subtle differences between the two reverse proxies:

  • Different access addresses, which can be configured to be the same via nginx
  • Vue proxy directly replaces the content before the identifier, while Nginx deals with it according to the actual situation of the background. It may directly replace the identifier and the previous content, or it may only replace the content before the identifier.