クロスドメイン(XMLHttpRequest)で困った話(POST)

こんにちは takeです。

Chrome Extensionを作成したときにクロスドメイン（XMLHttpRequest）で苦労しました。

今回作成した構成

• ChromeExtension
  • JavaScript
• WebAPI
  • Nodejs
  • Express
  • Heroku

発生した内容

ChromeExtensionからHerokuにデプロイしたAPIへXMLHttpRequestを送る際に困りました。

僕の場合は

• Extensionからリクエストを送るとAPI側からHttp StatusCode503が帰ってくる。
• レスポンスは帰ってくるが、送ったリクエストボディがきちんとAPI側で取得することができない。

やったこと

• ChromeExtension側
  クロスオリジンでPOSTを送る際は下記のコードで動作します。

var xhr = new XMLHttpRequest();
    xhr.open("POST", "ここにリクエスト先URL", true);
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.send(requestBody);

ここで注意すべきはContent-typeです。ここが原因でした。
もともと"application/x-www-form-urlencoded" と設定していたのですが、この状態だとリクエストを飛ばすことができても送ったRequestBodyをWebAPI側で取得できませんでした。

"application/json"に変更することで問題なく動作が確認できました。

少しapplication/x-www-form-urlencodedとapplication/jsonについて調べてみました。
どうやら送るリクエストの大体の形を表す形式が異なるよう

• application/x-www-form-urlencoded
  このContent-typeはリクエストボディをクエリパラメータの形で送るようです。

• application/json
  このContent-typeはリクエストボディをjson形式で送るようです。

どうやら僕はWebAPI側でリクエストボディの形式をjsonで想定していたのでapplication/jsonでうまくいったようです。

参考にさせていただいた記事
https://developer.mozilla.org/ja/docs/Web/HTTP/Methods/POST
https://qiita.com/bellcrud/items/1c7c73d42df10b4107c0

WebAPI側

• corsの設定

corsの設定も色々と細かくやりようがありますが、今回はこれでいけました。

// CORSを許可する
const express = require("express");
const cors = require('cors');
const app = express();
app.use(cors())

お読みいただきありがとうございました。
はてなブログもお願いします。