vue的proxy代理
/** 接口代理 */
proxy: {
"/sign-system": {
target: "http://127.0.0.1:8080/sign-system",
ws: true,
/** 是否允许跨域 */
changeOrigin: true,
rewrite: (path) => path.replace("sign-system", "")
}
}
上面这个代理的意思是当我们从浏览器中访问应该url这个url中有 /api/v1 就会被拦截下来,
例如:http://localhost:3333/sign-system/sign从浏览器访问这个url会被拦截下来,然后
/sign-system/sign这部分再经过rewrite的处理,在这里就是将 /sign-system 替换成""空字符串,变为了/sign,然后会将其拼接在http://127.0.0.1:8080/sign-system的后面,也就是说最终浏览器访问的url是http://127.0.0.1:8080/sign-system/sign 这个路径。
nginx代理
location /order/ {
proxy_pass http:/10.0.0.2:8080/order
}
如果说想访问 http:/10.0.0.2:8080/order/get_price,
只能通过访问nginx:10.0.0.1:80/orderr/get_price,然后nginx去代理过去。因为再实际项目中前端是不可能能直接访问服务的真实路径,都基本上都是通过代理来调用服务。
而通过上面的配置就是浏览器访问http://localhost:8080/order/get_price 这个路径,然后回通过nginx代理转变为http://10.0.0.2:8080/order/get_price 这个路径。
这个是将location/order路径后面的路径 /get_price 拼接到proxy_pass那个路径后面去,和vue的proxy代理有所不同。