RequireJSからのリクエストにCookieを仕込みたかった

画像やJS取得などの各種リクエストにCookie情報が不可欠な状況になったので調査しました。

普段通りにScriptタグで読み込んでいるJSのリクエストヘッダーにはブラウザのCookie情報が乗っていた。
でもRequireJSで読み込んでいるJSのリクエストヘッダーにはCookie情報が乗っていなかった。困る。

どうしてRequireJSのほうだけリクエストヘッダーがほぼ空なんだ？？？ということでRequireJSの仕組みを軽く調べました。

RequireJSのファイル読み込み手順をざっくりみる

読み込みたいJSを

Require(['hoge', 'hoeeee.js'], function(){});

とか記述することでファイルの読み込みを開始している。

読み込みが開始されたらRequireJSの中で
まずは事前に設定したRequirejs.config等で書いたモジュール名と実際のパスの関係を紐付けていく。
Rootパスの設定とかも行っている。
その後パスの文字列の補正みたいなことしてて
RequireJS内からHeadタグの中にこんな感じのScriptタグを生成して埋め込んでいく

<script type="text/javascript" async="true" src="http://js/hoeeee.js"></script>

ここまでが読み込みの流れの基本形かな？

さらに読み込み開始前にrequirejs.createNodeのメソッドを上書きすることで、様々な属性もつけることができる。

認証情報の付与設定

で、今回の問題の原因になってたのがこの記述。

var createNode = requirejs.createNode;
requirejs.createNode = function () {
　　var node = createNode.apply(this, arguments);
       // ここの部分↓
　　node.setAttribute('crossorigin', 'anonymous');
　　return node;
};

最初に書いた時は何も考えずにつけてた気がする、よくない。

この記述だと認証情報を付与しない、という設定を追加していることになる。
なのでCookie等の認証に使われる情報がごっそり抜け落ちてしまっていたという感じ。そりゃそうだわ。

認証の設定や種類については「CORS」で検索するといろいろ出てきたので参考になるかと。

今回は該当の箇所を削除することで問題は回避できたけど、現在の環境以外では認証関連は変わるだろうからまた気にかけてあげないとなぁって思ってる。

参考
・http://qiita.com/nanocloudx/items/f49600b705be9d53a9b5
・http://qiita.com/sue71/items/885caeedb02ae6dc48c4