在Vultr部署React应用后Nginx刷新404及配置新增后报错求助

问题拆解 #

• 刷新页面404：React属于单页应用（SPA），前端路由由JS控制，Nginx默认会去服务器磁盘查找对应路径的静态文件，找不到就返回404。
• 添加try_files后出现的错误：
  • net::ERR_BLOCKED_BY_CLIENT：大概率是浏览器的广告拦截、隐私保护类插件阻止了请求，和Nginx配置无关。
  • groupByTags.js:38 TypeError: Cannot read properties of undefined (reading '0')：前端代码逻辑错误，在未确认对象存在的情况下直接读取其0索引属性。

Nginx配置修正 #

你把try_files放错了位置——应该用于处理前端静态页面的根路径/，而不是后端代理的/service块。正确配置如下：

server {
    listen 80;
    server_name example.com www.example.com;
    root /var/www/example.com/build;
    index index.html;

    # 处理SPA路由，解决刷新404问题
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 代理后端服务，无需添加try_files
    location /service {
        proxy_pass http://localhost:8000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

修改后执行命令重启Nginx：

sudo systemctl restart nginx

剩余错误处理方案 #

1. 解决ERR_BLOCKED_BY_CLIENT：关闭浏览器的广告拦截器、隐私插件，或者将当前域名加入插件白名单。
2. 解决前端TypeError：打开groupByTags.js第38行，检查读取[0]的对象是否已正确初始化，比如增加空值判断：

// 示例修正逻辑
const targetData = someVariable || [];
if (targetData.length > 0) {
    const firstItem = targetData[0];
    // 后续业务逻辑
}

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