クロスドメイン(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())
お読みいただきありがとうございました。
はてなブログもお願いします。
Author And Source
この問題について(クロスドメイン(XMLHttpRequest)で困った話(POST)), 我々は、より多くの情報をここで見つけました https://qiita.com/QT21-004-2_HCB/items/8012b81f7df865c64004著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .