2017-12-06 16 views
1

ユーザ認証にJWTを使用しようとしています。クライアントはRelayを持つReactアプリケーションです。 GraphQLが提供するエンドポイントを通じてRailsバックエンドと話しています。JWTを設定しています - ヘッダのサーバからクライアントへトークンを渡しますが、クライアントのヘッダを解析できません

私は、レスポンスでヘッダーが公開されていることを確認するために、CORSを設定しました。私はまたAuthorizationの下で私のJWTを設定しました:リアクト側

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 

は、私は(ここからの例 - 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開発ツールを見ると、認証トークンが正しく設定されています。

Google Inspector

どのようにして公開し、私のクライアントアプリケーションから認証トークンを取得するのですか?

答えて

0

resPromiseとは何ですか? reqが約束している場合、これはうまくいくはずです

next => req => { 
     req.then(res => { 
     console.log(res.headers); 
    }); 
} 
+0

resPromiseは応答約束です。あなたの答えは私の現在のものですが、ヘッダーにはアクセスできません。 – Huy

関連する問題