🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
HTTP

HTTP(Hypertext Transfer Protocol)とはweb上でHTML等のコンテンツを交換するために使われるアプリケーション層の通信プロトコルです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

3回答

23601閲覧

ajaxのクロスドメイン通信時に失敗する

yohira0616

総合スコア257

HTTP

HTTP(Hypertext Transfer Protocol)とはweb上でHTML等のコンテンツを交換するために使われるアプリケーション層の通信プロトコルです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

1クリップ

投稿2016/06/07 07:57

編集2016/06/07 08:18

###前提・実現したいこと
異なるドメインのapiサーバにajaxで接続して認証を行いたい。
前提として、apiサーバ側はCORS通信を許可しています。

###発生している問題・エラーメッセージ

XMLHttpRequest cannot load "https://awesome-api.server.com/api/login" Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.

chromeのNetworkタブの通信結果はこんな感じです

General
Request URL:https://awesome-api.server.com/api/login
Request Method:OPTIONS
Status Code:200 OK
Remote Address:(情報保護のため伏せます)

Response Headers
Access-Control-Allow-Headers:Content-Type,X-Amz-Date,Authorization,X-Requested-With,X-Requested-By,X-Api-Key,X-Auth-Token
Access-Control-Allow-Methods:POST
Access-Control-Allow-Origin:*
Connection:keep-alive
Content-Length:18
Content-Type:application/json
Date:Tue, 07 Jun 2016 08:11:49 GMT
Via:1.1 1595f6e72d977d864a2806ced66554f2.cloudfront.net (CloudFront)
X-Amz-Cf-Id:eqeMld85btOJMKdiF6BQylYEB-NOlwq36r0hPNqkujHmXlngmOvSfg==
x-amzn-RequestId:7bdf2fa2-2c87-11e6-8972-9bd51d368f78
X-Cache:Miss from cloudfront

Request Headers
Accept:/
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:ja,en-US;q=0.8,en;q=0.6
Access-Control-Request-Headers:accept, access-control-allow-headers, access-control-allow-methods, content-type
Access-Control-Request-Method:POST
Cache-Control:max-age=0
Connection:keep-alive
Host:awesome-api.server.com
Origin:http://localhost:3002
Referer:http://localhost:3002/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36

###該当のソースコード

javascript

1(function ($,window) { 2 $(function () { 3 $.ajax({ 4 type:"POST", 5 url:"https://awesome-api.server.com/api/login", 6 data:{ 7 "access_key": "hoge", 8 "access_secret": "foo" 9 }, 10 headers:{ 11 'Access-Control-Allow-Headers':'Content-Type,X-Amz-Date,Authorization,X-Requested-With,X-Requested-By,X-Api-Key,X-Auth-Token,Accept', 12 'Access-Control-Allow-Methods':'GET,POST,OPTIONS', 13 'Content-Type':'application/json' 14 } 15 }).done(function (data) { 16 console.log(data); 17 }).fail(function (error) { 18 console.log(error); 19 }); 20 21 }) 22})(window.jQuery,window);

###試したこと
curlで同様のパラメータを組み立てて通信するとアクセストークンがきちんと返ってきます。

curl -X POST --header 'Content-Type: application/json' --header 'Accept: application/json' -d '{ "api_access_key": "hoge", "api_access_secret": "foo" }' 'https://awesome-api.server.com/api/login'

->{"accessToken":"thisisaccesstoken"}

エラーメッセージは「プリフライト・レスポンスのAccess-Control-Allow-OriginがAccess-Control-Allow-Headerを許可していません」と言っているので、プリフライトレスポンスのヘッダーをjQueryで操作できればなんとかなるのかなと思いましたが良い方法がわからないので質問します。

###補足情報(言語/FW/ツール等のバージョンなど)
jQuery 2.2.3

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2016/06/07 08:03

Access-Control-Allow-Originヘッダってリクエスト側で設定するんでしたっけ???
退会済みユーザー

退会済みユーザー

2016/06/07 08:11

レスポンス側で返すと思います。今日ちょうど同じ問題で悩んでる人を見かけたので
Lhankor_Mhy

2016/06/07 08:29

Access-Control-Allow-Headers Access-Control-Allow-Methods もレスポンス側のヘッダだと思うんですが……
guest

回答3

0

自己解決

javascript

1(function ($,window) { 2 $(function () { 3 $.ajax({ 4 type:"POST", 5 url:"https://awesome-api.server.com/api/login", 6 data:JSON.stringify({ 7 "access_key": "hoge", 8 "access_secret": "foo" 9 }, 10 headers:{ 11 'Content-Type':'application/json' 12 }) 13 }).done(function (data) { 14 console.log(data); 15 }).fail(function (error) { 16 console.log(error); 17 }); 18 19 }) 20})(window.jQuery,window); 21
  1. dataに渡す引数をJSON#stringifyする
  2. headerをContent-typeのみにする

ことで通信に成功しました。なぜこれで通るのかはわからないですが。。。
https://developer.mozilla.org/ja/docs/HTTP_access_control
を見てCORSについて勉強し直します。

投稿2016/06/10 07:17

yohira0616

総合スコア257

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

jsonpで返したら拾えると思うんですけどね。

JSONPをごりごり実装するときのポイント | qiita
ここのサーバー側の設定を参考に、jQueryでajaxしてjsonpで取得して整形すればどうかと思います。

投稿2016/06/08 18:09

hidekichi

総合スコア366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

クロスドメイン通信に関してはよく分かっていませんが、headerが意図した通りセットされているか、chrome等の開発ツールで、確認してみてはいかがですか?
chromeであれば、開発ツールのNetworkタブで各ファイルに対しての通信を確認することができるので、切り分けになるかと。

投稿2016/06/07 08:21

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問