Recently, the company separated the front and back ends, and the front end provided independent pages and static services. It was natural to think of using Nginx as a static server. At the same time, because of cross-domain, I want to use nginx reverse proxy to deal with cross-domain, but in solving the problem at the same time, found that there are some problems in some online solutions, here summarizes the basic configuration, also talk about the common configuration problems. There is a surprise at the end of the article

Nginx interface service reverse proxy basic configuration

server {
    listen 8443; # Listen to the port number
    server_name a.test.com; # server name
    client_max_body_size 100m;   # define the timeout for reading client headers
    ssl on;
    ssl_certificate test.pem;
    ssl_certificate_key test.key;
    ssl_session_timeout 5m;
    ssl_protocols SSLv3 TLSv1.2;
    ssl_ciphersECDHE-RSA-AES256-SHA384:AES256-SHA256:RC4:HIGH:! MD5:! aNULL:! eNULL:! NULL:! DH:! EDH:! AESGCM;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 directory parsing, with vue's history mode}}Copy the code

The basic configuration implements the basic functions of a page and a static server, as well as route resolution when using VUE’s History mode. Further, in order to achieve uniform forwarding to the interface server, we need to specify the prefix of the interface name with the backend developer, such that the relative path of all interfaces starts with API. In this case, we can add the following configuration (parallel to the previous location) :

. location /api { proxy_pass https://b.test.com; Proxy_cookie_domain b.test.com a.test.com; Request and Response cookies are written to each other.Copy the code

It mainly relies on proxy_pass to forward/API /x interface from A.test.com to B.test.com. The process is roughly as follows

Cookie interaction is basically proxy_cookie_domain, plus the following paragraph

proxy_cookie_domain b.test.com  a.test.com; 
Copy the code

This implements cookie passing and write back between a.test.com and b.test.com domains. Here is a little misunderstanding of understanding, later to add a detailed explanation. Make up, look here: juejin.cn/post/684490…

If you use Node to simulate it, it looks like this

module.exports =  (router) = > {
  router.get('/api/index/getCmsInfo'.async function (ctx, next) {
    // Interface forwarding
    let result = await superagent.post('https://b.test.com/api/card/home').set(browserMsg)
    // Get the returned set-cookie and set the header
    let setCookie = result.headers['set-cookie']
    if (setCookie) {
        ctx.response.header['set-cookie'] = setCookie
    }
    / / return
    ctx.response.body={
        success: true.result: result.body 
    }
  })
}
Copy the code

In summary, the essence of nginx reverse proxy is interface service forwarding and header processing, which is easy to understand.

Common misconceptions about

1, Useless ACA-header? Many nginx cross-domain Settings on the web add cross-domain header Settings related to content, such as

add_header 'Access-Control-Allow-Origin' The '*';
add_header 'Access-Control-Allow-Credentials' "true"; 
add_header Access-Control-Allow-Headers X-Requested-With;
Copy the code

Think about the above principle, you see the officer think this still use? Header of ACA(Access-Control-Allow-) series is configured for cross-domain negotiation in CORS.

2, proxy_pass domain name with ‘slash/’? Proxy_pass proxy_pass proxy_pass proxy_pass proxy_pass proxy_pass

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

Proxy_pass is used to catch messages. A slash means that all **/ API requests will be forwarded to the root directory, which means that/API will be replaced by /. What about when you don’t have a slash? This means that the path to/API is not lost when forwarding to the domain name b.test.com. In this case, if the backend interface has a specified prefix, such as **/ API **, then you do not need to configure a slash here. On the other hand, the backend interface shit is the same, there is no uniform prefix, here again to distinguish, then add a uniform prefix to all interfaces, such as **/ API **, and then replace it with a slash

A piece of evening news: ants have recently been recruited, emMM recently we will recruit again, Ant Financial – Sesame Credit recruitment front P6/7, big factory you understand, interested in the quick try, comments leave messages every night reply ha

That’s all for this time ~ today’s news broadcast is over, thank you for watching, (male) goodbye ~ (female) goodbye ~