nginx:前后端分离常用配置

  • 前端:dist 放在 nginx/html/dist
  • 后端接口:/api/** 转发到 SpringBoot
XML 复制代码
server {
    listen 80;
    server_name localhost;

    # 前端静态资源
    location / {
        root   html/dist;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html; # Vue/React 路由刷新
    }

    # 后端接口代理
    location /api/ {
        proxy_pass http://127.0.0.1:8080/api/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

结尾不带/的:

location /api/{

proxy_pass http://127.0.0.1:8080

}

请求地址 转发到后端地址
/api/user/login http://127.0.0.1:8080/api/user/login
/api/getInfo http://127.0.0.1:8080/api/getInfo
/api/order/list http://127.0.0.1:8080/api/order/list

结尾带/的:

location /api/{

proxy_pass http://127.0.0.1:8080/

}

请求地址 转发到后端地址
/api/user/login http://127.0.0.1:8080/user/login
/api/getInfo http://127.0.0.1:8080/getInfo
/api/order/list http://127.0.0.1:8080/order/list
相关推荐
时间售卖铺7 小时前
Nginx 反向代理
运维·nginx·云原生
life码农7 小时前
Nginx location 优先级详解:匹配规则、修饰符与完整代码示例
运维·nginx
爬也要爬着前进12 小时前
Prometheus通过Nginx-vts-exporter模块监控nginx服务
运维·nginx·prometheus
溪语流沙13 小时前
【Web全栈进阶】Nginx反向代理 + HTTPS:正式上线
前端·vue.js·python·nginx·https·fastapi
无敌糖果15 小时前
Nginx 后端error.log疯狂刷盘问题分析
运维·nginx
李纲明1 天前
WordPress 古腾堡点「更新」报「不是有效的 JSON 响应」:我按 REST 接口一路查下来的顺序
运维·nginx·php·wordpress·rest api
你看我名字1 天前
LNMP 生产架构与云运维实践:Nginx、PHP-FPM、MySQL 全链路分析
运维·nginx·架构
疯狂成瘾者2 天前
海康威视 WSS 视频取流原理:6014/559 端口、Nginx 代理与 TLS 证书问题
运维·nginx·音视频
李纲明2 天前
WordPress 首页正常、内页全 404:固定链接与伪静态规则排查步骤(Apache / Nginx)
nginx·apache·wordpress
小天源2 天前
从 Nginx 日志到访问分析:轻量化网站监测服务的架构实践
jvm·nginx·网络安全·架构·网络监控