nginx路由

一般我们经常在访问网站时，通常会遇到输入某个页面的网址时，出现路由的转发，重定向等。可能访问的是一个网址，出来的时候就显示的是另外的地址。这是由于使用了nginx的缘故，保护了网址的安全性

（1）假设我们想要从localhost:80/api/order/get 转到 localhost:8080/order/get，有两种书写方式

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

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

当扫描到location /api/时，会将它替换为http://localhost:8080/ ，同理第二个当扫描到location /api/order/时，会替换为 http://localhost:8080/order ，这样我们就可以顺利的访问到我们想要访问的路径。

（2）书写形式

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

rewrite作用：替换，讲/api/v1替换为/order。

此时，我们要访问的路径过程：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

通过nginx的转换，提高了服务器的安全性。

注意：

（1）浏览器不可能直接真正访问后台服务器。肯定是访问nginx，然后nginx给代理后端

（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 绝对不是后台地址，绝对不会是真正服务器的地址，他应该也是nginx的地址，这个请求是浏览器发出去的

（3）

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

从上述代码来看，sign-system开头的，会进到上面这个路由里面，然后会将sign-system/sign ，给拼接到target后面，这样得到的路径为sign-system/sign-system/sign，这样我们访问的路径时错误的，会造成404问题，所以，我们需要将sign-system替换为空格，这样就达到只将/sign ，拼接到target后面的目的以获得正确的路径。

猜你喜欢