ReactJS加载Nginx托管JSON报SyntaxError: Unexpected end of input问题排查

问题根源解析 #

你碰到的SyntaxError: Unexpected end of input本质是**mode: 'no-cors'导致的浏览器响应屏蔽**，再加上Nginx没配置正确的跨域规则。之前在React项目public目录下正常，是因为属于同源请求，浏览器没有跨域限制；但迁移到Nginx后变成了跨域请求，no-cors模式会让浏览器直接屏蔽响应内容，你的fetch代码拿到的是空的响应体，自然解析JSON时会报错。

修复步骤 #

1. 调整fetch请求，移除mode: 'no-cors'

浏览器默认的cors模式才是跨域请求的正确选择，直接去掉多余的模式声明：

fetch(`${cdnUrl}/data/content.json`)
  .then(res => {
    // 先校验响应状态是否正常
    if (!res.ok) throw new Error(`请求失败：${res.status}`);
    return res.json();
  })
  .then(data => {
    // 这里就能正常获取并解析JSON数据了
    console.log('加载的数据：', data);
    // 你的业务逻辑处理
  })
  .catch(err => console.error('请求错误：', err));

2. 在Nginx中配置CORS规则

需要给存放JSON的/data/路径添加跨域允许的响应头，确保你的React项目域名被授权请求。找到对应server块下的location配置（没有就新增），添加以下内容：

location /data/ {
    # 替换成你的React项目实际域名，比如开发环境的http://localhost:3000，生产环境的https://your-react-app.com
    add_header Access-Control-Allow-Origin "http://your-react-domain.com";
    # 允许的请求方法，GET足够满足JSON加载需求，可按需扩展
    add_header Access-Control-Allow-Methods "GET, OPTIONS";
    # 允许的请求头，JSON请求一般只需要Content-Type
    add_header Access-Control-Allow-Headers "Content-Type";

    # 处理浏览器自动发送的OPTIONS预请求（跨域请求前的预检）
    if ($request_method = OPTIONS) {
        return 204;
    }

    # 你的原有配置，比如指定静态文件根目录
    root /path/to/your/nginx/data/folder;
    # 可选：添加静态文件缓存规则优化性能
    expires 1d;
    add_header Cache-Control "public, immutable";
}

3. 重载Nginx配置生效

修改完配置后，先校验语法是否正确，再重载配置：

# 检查配置语法
nginx -t
# 语法无误则重载
nginx -s reload

额外注意事项 #

• 生产环境不要用*作为Access-Control-Allow-Origin，必须指定具体域名，避免安全风险。
• 如果React项目用了HTTPS，Nginx的Access-Control-Allow-Origin也要对应写成HTTPS域名。
• 可以通过浏览器开发者工具的Network面板，查看请求的响应头，确认Access-Control-Allow-Origin是否正确返回。

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