如何通过Football API按日期获取足球联赛数据？

在Next.js应用中调用Football API获取指定日期的足球联赛列表时，使用给定接口未得到预期数据，你的代码如下：

const date = '2022-01-01';
fetch(`https://football.sportdevs.com/leagues-by-date?date=eq.${date}`)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

可以从以下几个方向排查解决：

• 检查API认证要求：多数体育类API需要携带API密钥才能正常请求，确认该API的认证方式（比如在请求Headers中添加Authorization: Bearer 你的密钥或X-Api-Key: 你的密钥），并在请求中补充认证信息。
• 验证参数格式：确认date=eq.${date}的参数格式是否符合API规范，有些API可能不需要eq.前缀，直接使用date=${date}，或者要求日期为时间戳格式，建议查阅API文档的参数说明。
• 查看响应状态码：在请求中添加状态码打印，明确请求失败原因：

  const date = '2022-01-01';
  fetch(`https://football.sportdevs.com/leagues-by-date?date=eq.${date}`)
    .then(response => {
      console.log('请求状态码:', response.status);
      if (!response.ok) throw new Error(`请求失败: ${response.statusText}`);
      return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.error(error));
  

  常见状态码对应的问题：401代表认证失败，400代表参数格式错误，404代表接口地址无效。
• 确认接口地址正确性：核对API官方文档中的接口路径，确保没有拼写错误或路径变更。
• 处理Next.js跨域问题：如果API不支持CORS，可在next.config.js中配置反向代理：

  module.exports = {
    async rewrites() {
      return [
        {
          source: '/api/football/:path*',
          destination: 'https://football.sportdevs.com/:path*',
        },
      ];
    },
  };
  

  之后将请求地址改为/api/football/leagues-by-date?date=eq.${date}即可绕过跨域限制。

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