React/Spring Boot应用API调用返回.jsx而非预期数据求助

你的核心问题是所有/api开头的请求都被前端静态文件服务器（比如Nginx）接管，没有转发到Spring Boot后端，导致返回前端路由的fallback页面（空白页带导航栏），而非后端接口数据。以下是具体解决步骤：

1. 先确认后端服务正常运行 #

登录你的DigitalOcean Droplet，执行命令直接测试后端接口：

curl localhost:8080/api/packages/load

如果返回预期的JSON数据，说明后端服务没问题；如果没返回，先确保Spring Boot服务处于运行状态：

• 用java -jar your-backend.jar启动（临时测试）
• 生产环境建议用systemd配置后台服务，避免断开SSH后进程终止

2. 配置Nginx反向代理（关键步骤） #

假设你用Nginx托管前端静态文件，编辑Nginx站点配置文件（通常在/etc/nginx/sites-available/你的域名.conf），添加反向代理规则：

server {
    listen 443 ssl;
    server_name my_application_domain;

    # SSL证书路径（DigitalOcean一键部署的话会自动生成，手动部署需自行配置）
    ssl_certificate /path/to/fullchain.pem;
    ssl_certificate_key /path/to/privkey.pem;

    # 前端静态文件根目录
    root /var/www/你的前端项目目录;
    index index.html;

    # 处理前端路由刷新404问题
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 核心：将所有/api开头的请求转发到Spring Boot后端
    location /api {
        proxy_pass 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;
    }
}

# 将HTTP请求重定向到HTTPS
server {
    listen 80;
    server_name my_application_domain;
    return 301 https://$host$request_uri;
}

配置完成后，执行以下命令验证并重启Nginx：

nginx -t  # 检查配置是否合法
systemctl restart nginx  # 重启Nginx生效

3. 调整前端API地址配置 #

修改前端代码中的API基础路径，直接用相对路径/api而非完整域名，避免环境适配问题：

// 示例：Axios配置
axios.defaults.baseURL = '/api';

重新构建前端项目，将生成的静态文件部署到Nginx的根目录下。

4. 检查Droplet防火墙规则 #

• 生产环境无需对外暴露8080端口，因为Nginx是通过本地转发访问后端
• DigitalOcean防火墙只需对外开放80（HTTP）和443（HTTPS）端口即可

5. 排查常见坑 #

• 确保Spring Boot服务绑定的是0.0.0.0而非仅localhost（默认配置就是0.0.0.0，若手动修改过需改回）
• 关闭本地开发时的CORS配置（同域名下无需跨域），或确保后端允许当前域名的请求
• 查看Nginx日志排查请求流向：

  tail -f /var/log/nginx/access.log  # 查看访问日志
  tail -f /var/log/nginx/error.log   # 查看错误日志
  

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