こんにちは 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())

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