nginx-routing

Generally, when we visit a website, we usually encounter routing forwarding, redirection , etc. when entering the URL of a certain page. It is possible to visit a website, but when it comes out, another address is displayed. This is due to the use of nginx, which protects the security of the URL

(1) Suppose we want to go from localhost:80/api/order/get to localhost:8080/order/get, there are two ways of writing

1
location /api/ {
                proxy_pass      http://localhost:8080/}

2
location /api/order/ {
                proxy_pass      http://localhost:8080/order}

When scanning to location /api/, it will be replaced by http://localhost:8080/ , and the second one will be replaced by http://localhost:8080/ when scanning to location /api/order/ order , so that we can smoothly access the path we want to access.

(2) Writing form

proxy: {
  "/api/v1": {
    target: "https://mock.mengxuegu.com/mock/63218b5fb4c53348ed2bc212/api/v1",
    ws: true,
    /** 是否允许跨域 */
    changeOrigin: true,
  	rewrite: (path) => path.replace("/api/v1", "/order")
  },

Rewrite function: replace, replace /api/v1 with /order.

At this point, the path process we want to visit: localhost:3333/api/v1/order/get--- > https://mock.mengxuegu.com/mock/63218b5fb4c53348ed2bc212/api/order/get ----> https //mock.mengxuegu.com/mock/63218b5fb4c53348ed2bc212/order/get(nginx)--- >localhost:8080/order/get

Through the conversion of nginx, the security of the server is improved.

Notice:

(1) It is impossible for the browser to directly access the background server. It must be accessing nginx, and then nginx gives the proxy backend

（2）

https://mock.mengxuegu.com/mock/63218b5fb4c53348ed2bc212/api/order/get

https://mock.mengxuegu.com/mock/63218b5fb4c53348ed2bc212/order/get

https://mock.mengxuegu.com/mock/63218b5fb4c53348ed2bc212/login is definitely not the background address, it will never be the address of the real server, it should also be the address of nginx, this request is sent by the browser

（3）

"/sign-system": {
    target: "http://127.0.0.1:8080/sign-system",
    ws: true,
    /** 是否允许跨域 */
    changeOrigin: true,
    rewrite: (path) => path.replace("sign-system", "")
  }
}

From the above code, the one starting with sign-system will enter the above route, and then sign-system/sign will be spliced behind the target, so that the obtained path is sign-system/sign-system/sign, In this way, the path we visit is wrong, which will cause 404 problems. Therefore, we need to replace the sign-system with a space, so as to achieve the purpose of only splicing /sign to the target to obtain the correct path.

Guess you like