NGINX配置问题：API请求返回index.html而非预期响应

你的问题核心是NGINX的请求匹配规则导致API请求被错误地转发到前端静态页面。

问题根源 #

当前配置中，location / 是最宽泛的匹配规则，会捕获所有请求（包括API路径）。当API请求的路径在 /var/www/html/build 目录下找不到对应静态文件时，try_files $uri $uri/ /index.html 会直接返回前端的 index.html，而非转发到后端API服务。

修复方案 #

需要为API请求添加更具体的location规则，让NGINX将API请求转发到实际的后端服务，且这个规则要放在 location / 之前（NGINX优先匹配更精确的location）。

假设你的API路径前缀是 /api，修改后的配置示例如下：

server {
    listen 443 default_server;
    listen [::]:443 default_server;
    ssl on;

    server_name abc.global;
    root /var/www/html/build;

    # 新增API转发规则，放在location / 之前
    location /api/ {
        proxy_pass http://你的后端服务地址; # 替换为实际API服务地址，比如http://localhost:8080
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    location / {
            try_files $uri $uri/ /index.html;
    }

    location = /50x.html {
            alias /var/www/html/build;
    }

    error_page  404     /404.html;
    error_page  403     /403.html;

    # 注意：这个405规则仅适用于静态页面，若API出现405错误不要被此规则覆盖
    error_page  405     =200 $uri;

    ssl_certificate /Path/abc.crt;
    ssl_certificate_key /Path/abc.key;
}

关键说明 #

• 替换 http://你的后端服务地址 为实际的API服务器地址（比如后端运行在本地8080端口就写 http://localhost:8080）。
• 如果你的API前缀不是 /api，请对应修改 location 的路径（比如 /api/v1/）。
• 若API请求是其他HTTP方法（如POST/PUT），确保后端服务支持对应的方法，避免被 error_page 405 =200 $uri 规则干扰（该规则仅用于允许静态页面接收POST请求，不适合API场景）。

修改完成后，重启NGINX服务生效：

sudo systemctl restart nginx

内容的提问来源于stack exchange，提问作者Abdul Moeez