一般我们经常在访问网站时,通常会遇到输入某个页面的网址时,出现路由的转发,重定向等。可能访问的是一个网址,出来的时候就显示的是另外的地址。这是由于使用了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后面的目的以获得正确的路径。