Shulou(Shulou.com)05/31 Report--

This article focuses on the "Nginx reverse proxy cross-domain basic configuration method", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Now let the editor to take you to learn the "Nginx reverse proxy cross-domain basic configuration method"!

Basic configuration of reverse proxy for nginx interface service

Server {listen 8443; # listening port number server_name a.test.com; # server name client_max_body_size 100m; # defining the timeout ssl on; ssl_certificate test.pem; ssl_certificate_key test.key; ssl_session_timeout 5m for reading client request headers; ssl_protocols sslv3 tlsv1.2 Ssl_ciphers ECDHRAN RSAMULAR Aes256 Sha384 ssl_ciphers Aes256WACE256WACE256WACE256WACE256WACE256WACE256WACE256 RC4VOLIZHEDHULLER HACEGCM; ssl_prefer_server_ciphers on; location / {root / test-static-app; # static resource directory index index.html index.htm; try_files $uri $uri/ / index.html; # dynamic parsing directory, with vue's history mode}}

The basic configuration realizes the basic functions of pages and static servers, and can realize route resolution when using vue's history mode. Further, in order to achieve unified forwarding to the interface server, we need to specify the prefix of the interface name with the back-end developer, for example, the relative paths of all interfaces start with api, and we can add the following configuration (and the previous location level)

... location / api {proxy_pass https://b.test.com; # sets the protocol and address of the proxy server proxy_cookie_domain b.test.com a.test.com; # modifies cookie to write cookie to each other for request and response.

It mainly relies on proxy_pass, and the implementation forwards the / api/x interface under a.test.com to b.test.com. The process is roughly as follows

The interaction of cookie is mainly proxy_cookie_domain, plus the following paragraph

Proxy_cookie_domain b.test.com a.test.com

This implements the transfer and write-back of cookie between a.test.com and b.test.com domain names.

If you use node to simulate it, it is roughly as follows

Module.exports = (router) = > {router.get ('/ api/index/getcmsinfo', async function (ctx, next) {/ / API forwarding let result = await superagent.post ('https://b.test.com/api/card/home').set(browsermsg) / / get the returned set-cookie And set header let setcookie = result.headers ['set-cookie'] if (setcookie) {ctx.response.header [' set-cookie'] = setcookie} / / return ctx.response.body= {success: true, result: result.body})}

To sum up, the essence of nginx reverse proxy is the forwarding of interface services and the processing of header, which is easy to understand when you think about it.

Common misunderstandings

1. Useless aca-header?

Many cross-domain nginx settings on the Internet include cross-domain header settings, such as

Add_header 'access-control-allow-origin'' *'; add_header 'access-control-allow-credentials' "true"; add_header access-control-allow-headers x-requested-with

Think about the above principle, do you think this is still useful? The header of the aca (access-control-allow-) series is configured for negotiation cross-domain in cors, and this is a superfluous move to take off your pants and fart here.

2. Does the proxy_pass domain name have a 'slash /'?

Similarly, I saw on the Internet that some netizens would add a slash to the back when configuring proxy_pass, as follows, and then said that they had reported an error and could not find the interface ~ how to fix it?

... location / api {# proxy_pass https://b.test.com; proxy_pass https://b.test.com/;}...

When we see this, let's think about it. The function of proxy_pass is to grab hair. The addition of a slash means that all / api requests will be forwarded to the root directory, that is, / api will be / replaced. At this time, the interface path will be changed, with a layer of / api missing. Without a slash? This means that the path to / api will not be lost under the domain name forwarded to b.test.com.

In this case, if the backend interface has a specified prefix, such as / api, then you do not need to configure the slash here. On the other hand, the back-end interface shit is the same, without a uniform prefix, and you need to distinguish here. Add a unified prefix to all the front-end interfaces, such as / api, and then replace them by adding a slash.

At this point, I believe you have a deeper understanding of the "Nginx reverse proxy cross-domain basic configuration method". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.