Next.js客户端组件调用Contentful GraphQL接口遇401权限错误

核心原因 #

你遇到的问题大概率是客户端组件无法获取到正确的Contentful访问令牌。Next.js中，不带NEXT_PUBLIC_前缀的环境变量仅能在服务端访问，而你的这个组件是唯一的客户端组件（带'use client'），如果令牌环境变量没有加前缀，客户端就拿不到有效值，导致请求时传递的令牌为空或错误，触发401。

解决方案 #

1. 修正环境变量前缀

把Contentful的访问令牌环境变量改为NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN（必须带NEXT_PUBLIC_前缀），同时空间ID也建议改为客户端可访问的前缀形式：

修改.env.local文件：

NEXT_PUBLIC_CONTENTFUL_SPACE_ID=你的空间ID
NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN=你的访问令牌

2. 确保Apollo Client客户端配置正确

检查你的Apollo Client实例配置，确保客户端组件使用的实例正确注入了令牌。比如在lib/apollo-client.js中：

import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client';
import { setContext } from '@apollo/client/link/context';

// 客户端可访问的Contentful GraphQL端点
const httpLink = createHttpLink({
  uri: `https://graphql.contentful.com/content/v1/spaces/${process.env.NEXT_PUBLIC_CONTENTFUL_SPACE_ID}`,
});

// 注入Authorization请求头
const authLink = setContext((_, { headers }) => {
  return {
    headers: {
      ...headers,
      authorization: `Bearer ${process.env.NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN}`,
    },
  };
});

export const apolloClient = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(),
});

3. 验证客户端组件使用的是正确的Apollo实例

确保你的客户端组件中导入的是上述配置的apolloClient，而非服务端专用的实例。

4. 调试验证

在handleCategoryClick函数中添加日志，确认令牌是否正确获取：

const handleCategoryClick = async (categoryName) => {
  console.log('客户端令牌:', process.env.NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN); // 检查是否输出有效值
  // ... 原有代码
};

如果输出undefined，说明环境变量没正确暴露，需要重启开发服务器（修改.env文件后必须重启）。

额外检查点 #

• 令牌与端点匹配：如果使用预览令牌，需要把GraphQL端点改为预览地址https://graphql.contentful.com/content/v1/spaces/${spaceId}/environments/${environmentId}/preview，同时环境变量替换为预览令牌。
• 避免重复创建实例：确保客户端组件中不会重复初始化Apollo Client，导致配置丢失。

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