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

现在流行的前后端分离的写法。拆成不同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里

评论