React本地调用Sorare GraphQL API遇403错误求助

核心问题分析 #

你的代码存在几个关键问题导致403错误：

• mode: 'no-cors'会阻止自定义请求头（比如你设置的APIKEY）被正常发送到服务器，同时浏览器会屏蔽响应内容，服务器因未收到有效授权返回403。
• 误用了授权头字段，Sorare API要求使用标准的Authorization头（格式为Bearer <你的API密钥>），而非自定义的APIKEY字段。
• 免费的cors-anywhere代理实例可能存在请求限流或头传递异常的问题。

分步解决方案 #

1. 移除no-cors模式 #

no-cors会限制请求的正常交互，直接删除该配置：

const client = new ApolloClient({
  uri: proxyUrl + apiUrl,
  fetchOptions: {
    headers: {
      // 修正授权头的字段和格式
      'Authorization': 'Bearer <你的API密钥>'
    }
  },
  cache: new InMemoryCache(),
});

2. 修正授权头格式 #

确认API密钥已在Sorare平台正确生成，且使用Authorization: Bearer <密钥>的格式传递，这是Sorare API识别授权信息的标准方式。

3. 替换CORS代理（可选） #

免费cors-anywhere实例不稳定，推荐使用React本地代理：
在package.json中添加代理配置：

"proxy": "https://api.sorare.com"

然后修改Apollo客户端的URI：

const apiUrl = '/federation/graphql';
const client = new ApolloClient({
  uri: apiUrl,
  fetchOptions: {
    headers: {
      'Authorization': 'Bearer <你的API密钥>'
    }
  },
  cache: new InMemoryCache(),
});

4. 修正GraphQL查询格式 #

Sorare的players查询必须携带分页参数（如first），否则服务器会拒绝请求：

const GET_PLAYERS = client
  .query({
      query: gql`
          query GetPlayers {
              players(first: 10) { // 添加分页参数，指定返回数量
                  id
                  name
                  position
                  team {
                      id
                      name
                  }
              }
          }
      `,
  })
  .then((result) => {
      console.log(result);
      return result;
  })
  .catch((error) => {
      console.error('查询错误:', error); // 添加错误捕获，方便排查问题
  });

5. 在组件生命周期内执行查询 #

避免在组件顶层直接执行查询，改用useEffect确保只在组件挂载时执行一次：

import { useEffect } from 'react';

function App() { 
  useEffect(() => {
    const fetchPlayers = async () => {
      try {
        const result = await client.query({
          query: gql`
              query GetPlayers {
                  players(first: 10) {
                      id
                      name
                      position
                      team {
                          id
                          name
                      }
                  }
              }
          `,
        });
        console.log(result);
      } catch (error) {
        console.error('查询失败:', error);
      }
    };

    fetchPlayers();
  }, []);

  return <div>Sorare API测试</div>;
}

额外排查点 #

• 确认API密钥未过期，且拥有players查询的权限
• 打开浏览器开发者工具的Network标签，检查请求头是否正确发送，以及服务器返回的具体错误提示（如invalid token或missing authorization）

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