jquery で$.ajaxを使ってPOSTのリクエストしたいが、OPTIONSになってしまう

Question

jqueryを使用しています。
ajaxコマンドでリクエストを投げたのですが、POSTで投げたいのにOPTIONSになってしまいます。

ローカルPCにnginxでサーバを立てて、単純なWebページを作ってAzure上のIoTHubのサービスに投げようとしました。
ローカルホストのURLは、以下の通りです。
http://localhost:1234/

こんな感じのソースです。ダミーの値がいくつか入っていますが、読み替えてください。

var url = "https://hogehogesample.example.com/devices/sample_device_id/messages/events?api-version=2016-02-03";
//ヘッダーを作成
var ajaxHeaders = {
	'Content-Type': 'application/x-www-form-urlencoded;application/json;charset=utf-8', 	
	'Authorization': 'SharedAccessSignature sr=hogehogesample.example.com&sig=samplesig&se=samplese&skn=sampleskn'
};
//パラメータ作成
var ajaxParam = {
	url: url,
	type: 'POST',
	headers: ajaxHeaders,
	data: '{"test": "テスト"}'

};
//呼び出し
$.ajax(ajaxParam).done(function(){alert("success");});

これをchromeで実行し、開発者ツールでリクエストの内容を確認した処、Request Methodの部分が「OPTIONS」となります。
しかし、HeadersのAuthorizationを削除すると、「POST」として送信されます。

リクエスト先がPOSTしか受け付けていないため、どうにかPOSTにしないといけません。しかし'Authorization'ヘッダは仕様として必要なのです。
どうにかして、POSTでリクエストを送れないでしょうか？

ちなみにDHCというChromeの拡張機能を使った場合、POSTで正常に送信できました。

Comments

[kei344]

例示用ドメインはご自身で所有されていない限りexample.comを利用してください。

Answer 1

CORS(Cross-Origin Resource Sharing)での通信になりますので、
hogehogesample.example.comの方でCORSでの通信を許可してもらわないとダメだと思います

クライアント側もCORS用のパラメータをリクエストヘッダに付加する必要がありそうです
また、jQuery.support.cors = trueを追加するとかもあります

CORSについては以下とか参照してください
http://qiita.com/n0bisuke/items/3a6d6707ec9a1148a0b9
http://dev.classmethod.jp/etc/about-cors/

Comments

[usugita_san]

ありがとうございます。すっかり忘れてました。サーバ側での対応を検討してみます。

[usugita_san]

すみません、ドメイン名を「hogehogesample.example.com」に治してもらって宜しいでしょうか…。不注意で申し訳ありません。