ブラウザからAxiosでCookieセット

　ブラウザのSessionCookieなどをaxiosでそのままサーバーに送信したい時は以下のようにセットする。

axios.get('url',
  {
    withCredentials: true
  }
)

　そしてサーバー側は次のように許可する。（cors使用） 今回はサーバーサイドがNoneJSのexpressの場合の例だが、他の言語・フレームワークでも同じだ。

import * as express from "express";
const cors = require('cors')
const app = express()
app.use(cors({credentials: true, origin: true}));

　これだけでブラウザのsession情報がAxiosによってサーバーと通信できる。サーバー側でもcredentialsの設定が必要な点に注意。ちなみにHTTPOnlyのCookieもこの方法で送信されるので、セキュリティを考えてHTTPOnly設定にした方が良い。他にもAPI通信についてのセキュリティ対応はよく考えてほしい。（セキュリティが甘いとこんなにヤバいことが）

サーバサイドからAxiosでCookieセット

　ブラウザにレスポンスする前にサーバーサイドからWebAPIを叩きたい時もある。

　そしてその通信にもブラウザのCookieを送信したい時も当然ある。その場合はwithCredentialsではエンドポイントにブラウザのCookieは送信できない。（サーバーサイドからの通信なので当然）

　そんな時は、Cookieを以下のようにセットする。

// サーバーサイドのaxios
auth.get('/', function(req, res, next) {
      axios.get('url',
        headers: {
            Cookie: req.headers.cookie
        }
      )
});

　headersにExpressのrequest内のcookieをそのままセットするだけ。これで、サーバーサイドに共有されたCookie情報を他のバックエンドにも共有できる。例えばマイクロサービス設計のようにバックエンドが複数ある場合を想定。
　HTTP通信のセキュリティについては非常に重要なので以下を参考ください。

非認証APIのアクセス対策（粗大ごみセンターのシステムの例）

目次 　前回の記事で書いたとおり、全くユーザーが動作させる機能がないようなコーポレートサイトやLPサイトは静的サイトで作成するほうが、あ …

> Read More

(別ブログからの移行記事)