vue项目的代理配置以及nginx请求分发过程

标签：nginx配置   nginx   分代   规则   origin   区分大小写   部分   root   strong   

vue项目的config配置

// 以下的IP和端口均为假设，方便后续举例说明
proxyTable: {
      "/a": {
        target: "http://111.11.111.111:1111", 
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          "^/a": ""
        }
      },

      "/b": {
        target: "http://222.22.222.222:2222",
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          "^/b": "/b"
        }
      }
    }

vue的config配置文件中，配置的proxyTable字段意为配置代理，解决js请求的跨域问题。

如上面两个例子，当在vue项目中使用axios发出“/a/serviceA/classA/methodA”请求时，实际发出的请求为http://111.11.111.111:1111/serviceA/classA/methodA ，因为“/a”被替换成“”了；当发出“/b/serviceB/classB/methodB”请求时，实际发出的请求为http://111.11.111.111:1111/b/serviceB/classB/methodB ，因为“/b”被替换成“/b”，相当于没变，只是单纯解决了请求跨域的问题。

服务器上的nginx配置及其请求分发过程

假设以上两个IP和端口的nginx配置都是一样的，如下：

  location /{
    root /xxx/xxxx/xxx/dist;
    try_files $uri $uri/ @router;
  }
  location @router{
        rewrite ^.*$ /index.html last;
  }

  location /a/ {
     proxy_pass http://333.33.333.333:3333/;
  }

 location ^~ /b/ {
     proxy_pass  http://333.33.333.333:3333/;
 }

http://111.11.111.111:1111/serviceA/classA/methodA 请求先到达nginx，由nginx分发请求，“/serviceA/classA/methodA”先匹配/b/，匹配失败；再匹配/a/，匹配失败；接下来进行通用匹配“/”，nginx将把此请求分发到“http://111.11.111.111:1111/index.html”，请求这个静态资源文件，因为没有匹配到任何的接口服务。

http://111.11.111.111:1111/b/serviceB/classB/methodB 请求到达nginx后，“/b/serviceB/classB/methodB”匹配到了“/b/”，所以nginx将把此请求分发到http://333.33.333.333:3333/serviceB/classB/methodB

• 此处请求中的“/b”为什么不见了呢？因为在nginx配置中，proxy_pass后面的url加了“/”，相当于是绝对根路径，所以nginx不会把location中匹配的路径部分代理走；如果没有/，则会把匹配的路径部分给代理走
• 如果像这样写proxy_pass http://333.33.333.333:3333；那么此请求将被分发到http://333.33.333.333:3333/b/serviceB/classB/methodB

nginx匹配语法规则

location [=|~|~*|^~] /uri/ { … }

• = 开头表示精确匹配
• ^~ 开头表示uri以xx开头
• ~ 开头表示区分大小写的正则匹配，以xx结尾
• ~* 开头表示不区分大小写的正则匹配，以xx结尾
• !~和!~*分别为区分大小写不匹配及不区分大小写不匹配 的正则
• / 通用匹配，任何请求都会匹配到。

首先精确匹配
其次以xx开头匹配^~
然后是按文件中顺序的正则匹配
最后是交给 / 通用匹配

vue项目的代理配置以及nginx请求分发过程

标签：nginx配置   nginx   分代   规则   origin   区分大小写   部分   root   strong   

原文地址：https://www.cnblogs.com/upward-lalala/p/14540719.html