vue路由 & nginx路由

nginx路由

有两个同属于一个后端程序的接口，分别是：

           /order/get

           /order/cancel

本地地址是localhost:8080，使用nginx路由转发：

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

意思是：当在浏览器内输入 localhost:80/order/get 实际上是访问的 http://localhost:8080/order/get

（ 看到是 /order(包括前面的) 都替换为http://localhost:8080/order ）

如果浏览器输入：localhost:80/api/order/get

想转到 ：localhost:8080/order/get

使用nginx路由转发：

方式一

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

方式二

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

具体使用哪个还是要看业务场景，比如 api开头的还有其他服务，如下：

localhost:80/api/order/get ----->localhost:8080/order/get

localhost:80/api/test/get ----->localhost:8088/test/get

这时就不能使用第一种方式了

 vue路由

 意思是：当浏览器输入 localhost:3333/api/v1/... 都转换到https://mock.mengxuegu.com/mock/63218b5fb4c53348ed2bc212/api/v1/api/v1/...

 

意思是：将所有 /api/v1 都替换为 空 “ ”

https://mock.mengxuegu.com/mock/63218b5fb4c53348ed2bc212/api/v1/api/v1/...

转换成了 https://mock.mengxuegu.com/mock/63218b5fb4c53348ed2bc212/api/v1/...

🎇 https://mock.mengxuegu.com/mock/63218b5fb4c53348ed2bc212/api/v1/...绝对不会是后台地址，绝对不会是真正服务器的地址，它应该是nginx的地址，这个请求是浏览器发出去的

原因是：加上nginx转发可以防止攻击、比较安全

https://mock.mengxuegu.com/mock/63218b5fb4c53348ed2bc212/api/v1/...实际上是浏览器发送出去的，在生产中，浏览器不可能直接真正访问后台服务器。应该是先访问nginx，然后 nginx 给代理后端。

比如：10.0.0.1:80

location /order/ {
         proxy_pass      http:/10.0.0.2:8080/order
}

想访问 http:/10.0.0.2:8080/order，只能通过访问nginx:10.0.0.1:80/order，然后nginx去代理过去，不可能将真正的后台地址暴露给用户。

 

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

浏览器访问：http://localhost:3333/sign-system/sign

当检测到 sign-system 时，会进到上面这个路由里面，将其和其后内容 /sign-system/sign 拿出，拼接到http://127.0.0.1:8080/sign-system后，就变成http://127.0.0.1:8080/sign-system/sign-system/sign ，再根据rewirte替换成http://127.0.0.1:8080/sign-system/sign

rewrite这个替换，替换的path是最初的url中的 sign-system

 

 vue拼接的时候，不会将sign-System后面的，拼到target后面，而是会将sign-system后面的，前加sign-system，拼接到target

总结

两者区别 ！！！

vue：拼接（拼接时将本身和后面的都拼接到target后面）

nginx：替换（将本身和前面的都替换为target，后面的照常放在那即可）