无法为Apollo Client设置Authentication请求头的技术求助

嘿，我之前也碰到过几乎一模一样的问题！用Apollo Client搭配JWT认证时，看似简单的请求头配置，实际踩坑点还不少。下面是我亲测有效的几个解决思路，你可以挨个试试：

这是最常用的方案，能让所有GraphQL请求自动带上Authorization头部。核心是用setContext来注入请求头，步骤如下：

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

// 先创建基础的HTTP链接
const httpLink = createHttpLink({
  uri: '/graphql', // 你的Laravel GraphQL端点
});

// 配置认证链接，注入JWT token
const authLink = setContext((_, { headers }) => {
  // 从localStorage（或者你的token存储位置）获取token
  const token = localStorage.getItem('jwt_token');
  
  // 返回合并后的请求头，注意JWT的格式要加`Bearer `前缀
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : "",
    }
  }
});

// 合并链接并初始化Apollo Client
const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(),
});

这个方法会给所有Apollo发起的请求自动带上认证头，不用在每个查询里单独配置。

有时候前端明明传了头部，但后端接收不到，大概率是CORS没放行Authorization字段。打开Laravel的config/cors.php，确保allowed_headers里包含它：

'allowed_headers' => ['Content-Type', 'Authorization'],

如果你用的是barryvdh/laravel-cors包，也要对应更新配置文件里的允许头部列表。

别光看代码，打开浏览器开发者工具的Network标签，找到GraphQL请求，查看Request Headers里有没有Authorization字段：

• 如果没看到：说明前端获取token的逻辑有问题（比如token不存在、获取路径错了），或者setContext的配置没生效。
• 如果看到了但后端还是不认：检查token格式是否正确（必须是Bearer xxx），或者Laravel的JWT中间件有没有正确应用在GraphQL路由上。

如果你的token存在Redux store里，那可以直接从store获取token注入：

import store from './path/to/your/redux/store';

const authLink = setContext((_, { headers }) => {
  // 从Redux state里取token
  const { auth: { token } } = store.getState();
  
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : "",
    }
  }
});

要是你的token会动态更新（比如刷新token后），这个方法也能自动同步最新的token到请求头里。

如果试完这些还是不行，可以检查下JWT token是否过期，或者Laravel的auth:api中间件有没有正确绑定到GraphQL路由上。

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