React(Next.js)中如何将httpOnly JWT发送到GraphQL后端？

你遇到的问题本质是跨源CORS请求默认不携带Cookie导致的，和Cookie的httpOnly属性无关，也不是Cookie作用域的问题，以下是两类主流解决方案：

方案1：配置请求携带Cookie + 调整后端CORS（本地调试最简单方案） #

graphql-request底层基于Fetch API实现，Fetch API默认在跨源请求时不会携带Cookie，你需要手动开启携带凭证的配置：

• 初始化GraphQL客户端时添加credentials: 'include'参数：

import { GraphQLClient } from 'graphql-request'

const client = new GraphQLClient('http://localhost:8080/graphql', {
  credentials: 'include' // 核心配置，告诉浏览器跨源请求也要带Cookie
})

• 同时需要修改8080端口的GraphQL服务的CORS配置，满足两个要求：
  • Access-Control-Allow-Origin不能设置为*，必须明确指定允许的源为http://localhost:3000
  • Access-Control-Allow-Credentials设置为true

配置完成后浏览器就会自动在GraphQL请求中携带对应的httpOnly Cookie，后端直接从Cookie中读取JWT校验即可，不需要前端读取JWT放到请求头。

方案2：用Next.js API路由做转发（生产环境推荐最佳实践） #

这个方案完全不需要调整后端CORS配置，也不会暴露GraphQL服务地址，安全性更高：

1. 在Next.js项目的pages/api目录下新建graphql.js路由文件
2. 该路由接收前端发来的GraphQL请求，在Next.js服务端侧直接读取请求携带的httpOnly Cookie，将请求转发到8080的GraphQL服务
3. 前端所有GraphQL请求都改为发给/api/graphql，属于同域请求，默认就会携带Cookie，不需要额外配置

示例代码参考：

// pages/api/graphql.js
export default async function handler(req, res) {
  // 从请求中拿到Cookie
  const cookies = req.headers.cookie
  // 转发请求到后端GraphQL服务
  const response = await fetch('http://localhost:8080/graphql', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Cookie': cookies
    },
    body: JSON.stringify(req.body)
  })
  const data = await response.json()
  res.status(response.status).json(data)
}

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