【Swift】WKWebView内でのfetchなどのリクエストヘッダーのプロパティ名について

やぁ、ひさしぶり。
二年間沈黙してましたが、生きてました。

鬼忙しかった。ネタがなかったわけではない。

さて、表記の件さっそくいこうか。

昨今、アプリの実装と言っても、Webビューで実装する部分も多いかと思う。

その中で、React.jsや、Vueなどの、フロントエンドフレームワークないし、ライブラリを使っている人も多いと思うが、その時に、ひとつサーバーとの通信をするにしても、APIの実行の際に、
フロント側でリクエストを作らにゃならん場面も増えていると思う。

わしも同じ局面で、JSの有能なAPIである、fetch君をめちゃくちゃ乱用するわけだが、
その際に困ったことがおきた。

ローカル開発環境や、テスト環境でも直のhttpリクエスト（Postmanというアプリケーションを使用）では成功するのに、なぜかアプリのWebビュー上（SwiftのWKWebViewクラスで生成したインスタンス）からのリクエストだけが上手くいかないのだ。

もしやと思い、 なまら調べた挙句、バックエンドの人に、こちらからのリクエストのヘッダーオブジェクトを、レスポンスに含めてもらいようやっと判明した。

なんと、WKWebView上のリクエストヘッダーのうち、カスタムヘッダー（こちらでユニークで指定したプロパティ）のプロパティ名が全て小文字となっていたのだ。

これは大問題ではないか。
バックエンドではだいたい、ケース（大文字・小文字）も含めて検知処理を行うのが普通なので、これでコケるのはなかなかエグい。

どういうことかというと、下記の構文でリクエストしたとする。

const contents = JSON.stringify({ content: 'mog' });
const header = {
  'Content-Type': 'application/json',
  'Auth-Token': 'Hoge_Token'
};
// ここで、キャメルケースでヘッダーを指定するのが普通

const reqBody = {
  method: 'POST',
  body: contents,
  headers: header
}
fetch('hoge/api/hogehoge', reqBody).then(data => data.json());

上記だとなんと、リクエストヘッダーは下記となる。

{
  "content-type": "application/json",
  "auth-token": "Hoge_Token"
}
// カスタム以外の他のプロパティ名は小文字変換されていない

これを見つけるのに時間がかかり、実装に大きく遅れが生じてしまった。
ってか普通こんなん知らんがな、だろww
限定的だしw

結果、バックエンドで、ケース判別をゆるくしてもらい、無事実装完了。
現象がピンポイントなのに、けっこう昨今の実装で十分ひっかかるところだから、今回のはエグかった。

ちなみに、いくら調べても、AIに聞いても、情報は見つからない。
ただし、AIに解決報告したので、もしかしたら、今後は出てくるかもしれない。

ってわけで、久々に、まともなネタができたので、記事に書いてみました。
ではまた。

const contents = JSON.stringify({ content: 'mog' });
const header = {
  'Content-Type': 'application/json',
  'Auth-Token': 'Hoge_Token'
};
// ここで、キャメルケースでヘッダーを指定するのが普通

const reqBody = {
  method: 'POST',
  body: contents,
  headers: header
}
fetch('hoge/api/hogehoge', reqBody).then(data => data.json());

{
  "content-type": "application/json",
  "auth-token": "Hoge_Token"
}
// カスタム以外の他のプロパティ名は小文字変換されていない