设置 JWT - 在标头中将令牌从服务器传递到客户端，但无法解析客户端中的标头

Posted 2023-03-10

【中文标题】设置 JWT - 在标头中将令牌从服务器传递到客户端，但无法解析客户端中的标头

【英文标题】：Setting up JWT - Passing token from server to client in header, but cannot parse header in client

【发布时间】：2018-05-20 21:20:17

【问题描述】：

我正在尝试使用 JWT 进行用户身份验证。客户端是一个带有 Relay 的 React 应用程序。它通过 GraphQL 服务的端点与 Rails 后端通信。

在 Rails 方面，我设置了 CORS 以确保我在响应中公开了我的标头。我还将我的 JWT 设置为 Authorization:

class Api::GraphsController < ActionController::Base

def create
  headers['Access-Control-Allow-Origin'] = '*'
  headers['Access-Control-Allow-Methods'] = 'POST, GET, PUT, DELETE, OPTIONS'
  headers['Access-Control-Allow-Headers'] = 'Origin, Content-Type, Accept, Authorization, Token'
  headers['Access-Control-Max-Age'] = "1728000"
  headers['Access-Control-Expose-Headers'] = 'content-length'

  #set a fresh token after every request
  headers['Authorization'] = "WOW.WoW.Wow"

  render json: Schema.execute()
end

在 React 方面，我已经在我的 Relay 中间件层中设置了选项（示例来自这里 - https://github.com/nodkz/react-relay-network-layer/blob/master/README.md#middlewares）。但是，这是我无法访问我的标题的地方。当我打印res.headers 时，它只显示Header 。

const options = [
  urlMiddleware(
    url: (req) => getEndpoint()
  ),
  retryMiddleware(
    fetchTimeout: 60000,
    retryDelays: (attempt) => [7000],
    forceRetry: (cb, delay) =>  window.forceRelayRetry = cb ,
    statusCodes: [500, 503, 504]
  ),
  next => req => 
    req.credentials = 'same-origin'; // provide CORS policy to XHR request in fetch method
    const resPromise = next(req);
    resPromise.then(res => 
      let headers = res.headers //Headers is empty
      let user = res.json.data.user //Body is sent properly

      return res;
    )
    .catch((e) => 
      console.log('=============error===========', e);
    )

    return resPromise;
  
]

当我查看 Chrome 的开发者工具时，我看到授权令牌设置正确。

如何从我的客户端应用程序公开和获取授权令牌？

【参考方案1】：

什么是resPromise？ 如果 req 是一个承诺，这应该可以工作

next => req => 
        req.then(res => 
        console.log(res.headers);
    ); 

【讨论】：

resPromise 是响应承诺。你的答案是我目前拥有的，但标题不可访问。