如何用Axios发起Supabase GraphQL请求？添加Payload遇404问题

问题重现 #

尝试通过Axios调用Supabase GraphQL接口，官方提供的curl示例如下：

curl -X POST https://<PROJECT_REF>.supabase.co/graphql/v1 \
    -H 'apiKey: <API_KEY>' \
    -H 'Content-Type: application/json' \
    --data-raw '
    {
      "query":"{ accountCollection(first: 3) { edges { node { id } } } }"
    }'

自行转换的Axios代码如下，但添加请求Payload后始终返回404错误：

var callObject = {
   url:https://<PROJECT_REF>.supabase.co/graphql/v1,
   method:"POST",
   headers:{
      "Authorization" : "Bearer " + apiKey,
      "apikey": apiKey,
      "Content-Type": "application/json"
   }
}
var response = await axios(callObject)

解决方法 #

1. 正确添加请求Payload

Axios中对应curl --data-raw的是data字段，需将GraphQL查询对象放在该字段下：

data: {
  query: "{ accountCollection(first: 3) { edges { node { id } } } }"
}

2. 移除多余的Authorization头

Supabase GraphQL接口仅需apikey头即可完成身份验证，curl示例中并未使用Bearer Token，多余的Authorization头可能导致请求异常，建议直接移除。

3. 确认URL变量已替换

务必将<PROJECT_REF>替换为你的Supabase项目实际ID，未替换该变量会直接导致404错误。

修正后的完整代码 #

// 替换为实际的项目ID和API密钥
const projectRef = "你的PROJECT_REF";
const apiKey = "你的API_KEY";

const callObject = {
  url: `https://${projectRef}.supabase.co/graphql/v1`,
  method: "POST",
  headers: {
    "apikey": apiKey,
    "Content-Type": "application/json"
  },
  data: {
    query: "{ accountCollection(first: 3) { edges { node { id } } } }"
  }
};

try {
  const response = await axios(callObject);
  console.log(response.data);
} catch (error) {
  console.error("请求失败:", error.response?.data || error.message);
}

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