使用nginx配置Vue项目，减少一次option请求

2022.02.20 01:53

现在流行的前后端分离的写法。拆成不同Web服务进行部署。客户端一般是多发一个option请求解决跨域问题。有多个通过api拉数据请求，就有多少个option请求，对性能影响很大。

使用Nginx可以把特定路径的请求转发到指定服务里。

把前端网站部署域名为blog.iwangtao.com，然后有个后台服务，之前的域名是api.iwangtao.com。现在可以在blog.iwangtao.com里做配置，把blog.iwangtao.com下的/api/*请求转发到原api.iwangtao.com下。

定义好一个后台的upstream是这样的

upstream say-hi {
    server 127.0.0.1:9000;
    server 127.0.0.1:9001;
    server 127.0.0.1:9002;
    server 127.0.0.1:9003;
}

在server内，添加

location /api/ {
    proxy_pass_header Server;
    proxy_set_header Host $http_host;
    proxy_redirect off;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Scheme $scheme;
    proxy_pass http://say-hi/;
}
「/api/」结尾一定要是「/」才会可以正常匹配。

普通前端匹配的路径，例如location / {}
抢占式前缀匹配的路径，例如location ^~ / {}
精确匹配的路径，例如location = / {}
命名路径，比如location @a {}
无名路径，比如if {}或者limit_except {}生成的路径

这样所有/api/请求都会转发到配置好的say-hi里

Nginx Vue