2016-05-09 12 views
-1

私のプロジェクトにフル・ソースhereというCookieを追加しようとしていましたが、Cookieを正しく設定できない問題が発生しました。私はクッキーを作成してオブジェクトをクライアントに送る、新しいAPIルートを作った。ヘッダーが存在していてもブラウザにCookieを設定できません

サーバー/ルート/ todo.routes.js

router.get('/todos', (req, res) => { 
    res.cookie('mycookie', 'a_value') 
    return res.send([{id:'1',isCompleted:false,text:'something'}]) 
}) 

私が直接このAPIのルートを呼び出した場合、ブラウザは、オブジェクトをレンダリングし、クッキーが設定されています。問題は、レンダリングされたページからこのAPIをAJAX経由で呼び出すと、私はまだ同じレスポンスを得ますが、クッキーは設定されません。 注:ルータをエクスポートしてapp.use( '/ api'、exported_object_here)を実行するので、URLは/ api/todosです。

export const getTodos =() => { 
    return (dispatch) => { 
     return fetch('/api/todos') 
      .then(response => response.json()) 
      .then(todo => dispatch(_receiveTodos(todo))) 
      .catch(err => dispatch(_errorHandler(err))); 
    } 
}; 

todo.actions.js

共有/アクション/ Iは、ブラウザが特にそう単純なもので、そのような状況で異なる動作をする理由はわかりません。これを引き起こす原因は何ですか?あなたのXHRリクエスト(https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials)にwithCredentialsを設定する必要が

+0

アヤックスは、私はあなたが私たちにあなたがクッキーを読んで、それがないと結論しているコードを表示する必要があると思うので、クッキーを設定してください呼び出します。あなたの 'res.cookie()'呼び出しではセッションクッキーを作成するように有効期限を設定していません。 – jfriend00

+0

Chromeデバッガの[ネットワーク]タブを使用して、リクエスト/レスポンスと実際のCookieをブラウザで調べて、CookieがAPIリクエストから返されたかどうかを確認し、その後にブラウザに保存されているものを確認し、次回のリクエストでどのCookieが送信されたかを確認するための後続のリクエストを行います。これは、状況が予想外のものになっている可能性があります。 – jfriend00

+0

私はそれが、それがある状況ではなく他の状況では機能することを観察したことを確認しました。私がそのURLをどのように呼び出すかにかかわらず、私は常にクッキーヘッダーをクライアントに送ります。 API URLに直接アクセスすると、ヘッダーが取得され、クライアントがリソースに保存します。次に、後続のリクエストでクッキーを送信します。ページ上でAjaxを使用すると、同じCookieも取得されますが、ブラウザはそのCookieを保存せず、要求に応じて送信されません。 –

答えて

1

+0

これはクロスオリジンajaxリクエストのようには見えません。 – jfriend00

+0

実際、これが問題でした。フェッチ呼び出しのオプションとして 'credentials: 'same-origin'を設定する必要がありました。一度私がそれをしたら、それは働いた! –

+0

@Mr_Antivius - なぜ、これが実際にクロスオリジンリクエストである場合、あなたのコードは 'fetch( '/ api/todos')'を表示しますか? – jfriend00

関連する問題