Question

我正在尝试使用Apollo Client将我的react应用程序连接到hasura后端api，但是我收到以下错误消息：

错误：GraphQL错误：授权标头格式错误

我不知道是什么原因造成的。

我知道我从Cognito获得了有效的ID令牌，因为我可以将其粘贴到Hasura控制台中并且可以正常工作。

我真的只是将apollo授权示例粘贴到了index.js文件中，并放入了uri。我开始使用apollo-boost，但由于相同的错误而去了apollo-client。显然，这没有帮助。我已经搜寻了互联网，却找不到任何与此相关的信息，这可能意味着我正在做一些愚蠢的事情。

这是我的index.js中的阿波罗客户端代码：

.mask(Circle())

这是错误：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import ApolloClient from 'apollo-client';
import { createHttpLink } from 'apollo-link-http';
import { setContext } from 'apollo-link-context';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloProvider } from 'react-apollo';
import { Auth } from 'aws-amplify';

async function getSession() {
    Auth.currentSession().then(res=>{
        let idToken = res.getIdToken()
        let jwt = idToken.getJwtToken()
        //if I console log jwt here I can paste it into hasura and it works
        return jwt
      })
  }

const token = getSession()

//copied from apollo docs:
const httpLink = createHttpLink({
    uri: 'https://api.example.com/v1/graphql',
  });

const authLink = setContext((_, { headers }) => {
    return {
      headers: {
        ...headers,
        authorization: token ? `Bearer ${token}` : "",
      }
    }
  });

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

另外，由于查询未返回任何内容，我从浏览器中收到错误消息。

以下是chrome控制台在graphql标头中的内容：

Error: GraphQL error: Malformed Authorization header
at new ApolloError (bundle.esm.js:76)
at ObservableQuery.getCurrentResult (bundle.esm.js:200)
at ObservableQuery.currentResult (bundle.esm.js:163)
at Query._this.getQueryResult (react-apollo.esm.js:247)
at finish (react-apollo.esm.js:434)
at Query.render (react-apollo.esm.js:441)
at finishClassComponent (react-dom.development.js:15319)
at updateClassComponent (react-dom.development.js:15274)
at beginWork (react-dom.development.js:16262)
at performUnitOfWork (react-dom.development.js:20279)
at workLoop (react-dom.development.js:20320)
at renderRoot (react-dom.development.js:20400)
at performWorkOnRoot (react-dom.development.js:21357)
at performWork (react-dom.development.js:21267)
at performSyncWork (react-dom.development.js:21241)
at requestWork (react-dom.development.js:21096)
at scheduleWork (react-dom.development.js:20909)
at Object.enqueueForceUpdate (react-dom.development.js:11632)
at Query.push../node_modules/react/cjs/react.development.js.Component.forceUpdate (react.development.js:355)
at Query._this.updateCurrentData (react-apollo.esm.js:214)
at Object.error (react-apollo.esm.js:197)
at notifySubscription (Observable.js:157)
at onNotify (Observable.js:196)
at SubscriptionObserver.error (Observable.js:253)
at bundle.esm.js:541
at Array.forEach (<anonymous>)
at iterateObserversSafely (bundle.esm.js:540)
at Object.onError [as error] (bundle.esm.js:482)
at invoke (bundle.esm.js:1532)
at bundle.esm.js:1565
at bundle.esm.js:1986
at Set.forEach (<anonymous>)
at bundle.esm.js:1984
at Map.forEach (<anonymous>)
at QueryManager.broadcastQueries (bundle.esm.js:1982)
at bundle.esm.js:2109
at Object.next (Observable.js:333)
at notifySubscription (Observable.js:152)
at onNotify (Observable.js:196)
at SubscriptionObserver.next (Observable.js:248)
at bundle.esm.js:1079
at Set.forEach (<anonymous>)
at Object.next (bundle.esm.js:1078)
at notifySubscription (Observable.js:152)
at onNotify (Observable.js:196)
at SubscriptionObserver.next (Observable.js:248)
at notifySubscription (Observable.js:152)
at onNotify (Observable.js:196)
at SubscriptionObserver.next (Observable.js:248)
at bundle.esm.js:107

任何帮助将不胜感激。

Answer 1

分配给token的值是Promise类型，而不是您期望的字符串。

由于getSession()是一个异步函数，因此它返回一个promise。

此行：

const token = getSession()

将承诺而不是其已解决的值分配给token。

在将结果分配给token之前，您需要等待承诺解决。

如何修复来自Apollo客户端的格式错误的身份验证标头错误

1 个答案: