クロスドメイン(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-urlencodedapplication/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())

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