React从Symfony API Platform跨域拉取JSON数据失败排查

核心原因是API Platform会根据请求的Accept请求头返回不同格式的内容：

• 浏览器地址栏发起的请求，默认Accept头包含text/html，所以返回Swagger文档；
• 你的React fetch请求如果没指定正确的Accept头，拿到的其实是HTML文档，解析成JSON自然没有数据，尽管状态码显示200。

以下是具体解决步骤：

1. 给fetch请求添加正确的Accept头 #

API Platform默认使用JSON-LD格式，所以需要在请求头里指定Accept: application/ld+json；如果你的API配置了支持纯JSON，也可以用application/json。示例代码：

fetch('http://127.0.0.1:8000/api/users?page=1', {
  method: 'GET',
  headers: {
    'Accept': 'application/ld+json' // 关键：指定要JSON格式的响应
  }
})
.then(response => {
  // 先确认响应状态正常
  if (!response.ok) {
    throw new Error(`HTTP error! Status: ${response.status}`);
  }
  return response.json();
})
.then(data => {
  console.log('获取到的数据：', data);
  // 这里处理你的业务逻辑
})
.catch(error => {
  console.error('请求出错：', error);
});

2. 排查响应内容（如果第一步无效） #

如果添加头后还是没数据，可以先打印响应的原始文本，确认返回的是不是JSON：

fetch('http://127.0.0.1:8000/api/users?page=1', {
  headers: { 'Accept': 'application/ld+json' }
})
.then(response => response.text())
.then(rawText => {
  console.log('原始响应内容：', rawText);
  try {
    const data = JSON.parse(rawText);
    console.log('解析后的JSON：', data);
  } catch (err) {
    console.error('响应不是有效JSON：', err);
  }
});

如果打印出的是Swagger的HTML代码，说明你的Accept头没生效，或者API Platform的配置有问题——这时候可以检查Symfony的nelmio/cors-bundle配置，确保它允许传递Accept头（默认应该允许，但可以确认allowed_headers里包含Accept）。

补充：API Platform格式协商机制 #

API Platform默认支持多种响应格式，包括JSON-LD、JSON、HTML（Swagger）等。它会优先匹配请求Accept头里指定的格式，所以前端必须明确告诉后端要什么格式的响应，否则可能拿到非预期的内容。

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