vue代理模式nginx配置的介绍

本篇文章给大家带来的内容是关于vue代理模式nginx配置的介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

前端使用vue.js开发,后端使用tornado框架提供restful API, vue.js使用代理;如 当前端js请求http://192.168.9.62:9000/api/orders时候后端通过nginx配置去请求http://192.168.9.62:9000/v1/orders

需求

nginx需要将前端js请求http://192.168.9.62:9000/api/orders 转发 http://192.168.9.62:9000/v1/orders

nginx配置

upstream svrs {
 # 负载均衡的servers
 server 127.0.0.1:8001;
 server 127.0.0.1:8002;
 server 127.0.0.1:8003;
 server 127.0.0.1:8004;
 server 127.0.0.1:8005;
 server 127.0.0.1:8006;
 server 127.0.0.1:8007;
 server 127.0.0.1:8008;
 server 127.0.0.1:8009;
 server 127.0.0.1:8010;
}

server {
 listen 9000;
 server_name _;


 location /v1 {
 # 直接访问 http://192.168.9.62:9000/v1/orders 的配置
 proxy_pass_header Server;
 proxy_redirect off;
 proxy_set_header Host $http_host;
 proxy_set_header x-forwarded-for $remote_addr;
 proxy_set_header X-Real-IP $remote_addr;
 proxy_read_timeout 120;
 proxy_pass http://svrs;
 }

 location /api {
 # 访问http://192.168.9.62:9000/api/orders 的配置
 # 重写 api/ --> v1/ 
 rewrite ^.+api/?(.*)$ /v1/$1 break;
 # 后端的API服务器
 proxy_pass http://svrs; 
 }


 location / {
 # 前端打包的静态文件
 root /home/xx/xx_web;
 index index.html;
 }
}