nginx的代理和vue的代理

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去代理过去，在实际项目中前端是不可能能直接访问服务的真实路径，都基本上都是通过代理来调用服务。

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

而通过上面的配置就是浏览器访问http://localhost:8080/order这个路径，然后会通过nginx代理转变为http://10.0.0.2:8080/order 这个路径。

nginx的代理替换是将拦截的内容直接替换为proxy_pass的url。

vue代理

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

上面这个代理的意思是当我们从浏览器中访问应该url这个url中有  /sign-system  就会被拦截下来，

例如：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 这个路径。

sign-system开头的，会进到上面这个路由里面，然后会将sign-system/sign ，给拼接到target后面，而不是说只将/sign ，拼接到target后面

rewrite的作用，就是将sign-system/sign 中的sign-system，替换成空格，来达到只将/sign ，拼接到target后面的目的。