web-dev-qa-db-ja.com

NextJS-getInitialPropsからAPIサーバーへのCookieの送信

NextJSをクライアント側リポジトリとして使用して、バックエンドAPIサーバー（laravel）と通信しています。認証は、Cookieに保存されたJWTを介して行われます。 Cookieで応答し、my-backend-server.comドメインに設定しているため、https://my-backend-server.com/api/loginに認証リクエストを送信すると、すべてがシームレスに機能します。また、ブラウザからリクエストを送信する場合も同様です。

これはサーバーサイドの呼び出しであるため、ページをロードしてgetInitialPropsからリクエストを送信すると問題が発生します。 NextJSからのサーバー側リクエストが適切に承認されるように、my-backend-server.comへのCookieにアクセスしてヘッダーに配置するにはどうすればよいですか？

ほとんどの回答はreq.cookiesまたはreq.headers.cookiesについて何かを述べていますが、getInitialPropsのリクエストはhttp://my-local-clientside-site.comに対するものであるため、これは空です

node.jslaravelcookiesnext.jsserver-side-rendering
2
Afs35mm

正しく説明したように、NextのgetInitialPropsはclientおよびonserverで呼び出されます。

NextアプリとAPIサービスが同じドメインから提供されている場合、ApiサービスはドメインにCookieを置くことができ、クライアント側（ブラウザー）で機能します。

Nextアプリがサーバー側からAPIにアクセスするときはいつでも、自分でCookieを添付する必要があります。

サーバー側のgetInitialPropsメソッドは、ブラウザーからコンテキスト（最初のパラメーター）で要求を（reqとして）取得します。つまり、この要求にはcookie。

カスタムサーバーがある場合は、おそらくそれに追加する必要があります cookieParser 、

// server.js

import cookieParser from 'cookie-parser';
import express from 'express';
import next from 'next';

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
app.prepare().then(() => {
  const nextHandler = app.getRequestHandler();

  const server = express();

  server.use(cookieParser());
  // -----------^

  server.get('*', (req, res) => nextHandler(req, res));
});

このパーサーは、Cookieヘッダーを解析し、reqのオブジェクトとして配置します。

その後、あなたのreq.cookieにはcookie値が必要です（ブラウザがドキュメントリクエストで送信することを確認してください）。getInitialPropsでアクセスできます。

//pages/index.js

const IndexPage = () => <div>BLA</div>

IndexPage.getInitialProps = (context) => {
  if(context.req) {
    // it runs on server side
    axios.defaults.headers.get.Cookie = context.req.headers.cookie;
  }
};

クライアントからのすべてのリクエストにcookieを配置するようにaxiosを設定する例を紹介しました。

2
felixmosh