React Native Expo应用调用开放数据API时出现403 Forbidden错误求助

看起来你遇到的这个403问题挺典型的！我之前在调用某些公共API时也碰到过类似情况，结合你说的“浏览器、Postman能正常请求，但Expo真机/模拟器不行”的现象，大概率是请求头里的User-Agent不符合API服务器的验证规则。

很多公共API会对请求的User-Agent做校验，React Native的fetch方法默认的User-Agent可能被服务器判定为“非合法客户端”，从而返回403 Forbidden；而浏览器和Postman会自动带上标准的User-Agent头，所以能正常请求。

解决方案：给fetch请求添加合法的User-Agent头 #

修改你的fetchFoods函数，在fetch调用中加入headers参数，模拟浏览器的请求头即可：

const fetchFoods = () => {
  const apiURL = 'https://fineli.fi/fineli/api/v1/foods?q=omena';
  // 模拟浏览器的User-Agent，你也可以换成其他合法的User-Agent值
  const headers = new Headers({
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36'
  });

  fetch(apiURL, { headers })
    .then((response) => {
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      return response.json();
    })
    .then((responseJson) => {
      setFilterData(responseJson);
      setMasterData(responseJson);
    })
    .catch((error) => {
      console.error('A network error has occurred: ', error);
    });
}

为什么这能解决问题？ #

Fineli的API服务器可能设置了规则，只接受带有标准浏览器/客户端标识的请求。通过手动添加合法的User-Agent，我们让请求看起来像是来自正常的浏览器，从而绕过服务器的拦截。

额外排查建议 #

如果添加User-Agent后还是有问题，可以试试这些操作：

• 再确认下API是否需要额外的授权信息？不过你用Postman直接请求能成功，应该不需要，但可以翻下官方文档确认细节
• 开启Expo的远程调试模式（Debug Remote JS），查看请求的具体头信息和服务器返回的详细错误内容
• 更换不同的User-Agent值试试，比如移动端浏览器的标识（比如Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1）

备注：内容来源于stack exchange，提问作者Meveena Ramadoss