質問をすることでしか得られない、回答やアドバイスがある。

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

ただいまの
回答率

90.51%

  • JavaScript

    19308questions

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

  • jQuery

    7765questions

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

  • Ajax

    1261questions

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

  • HTTP

    625questions

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

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 8,987

yohira0616

score 239

前提・実現したいこと

異なるドメインの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

該当のソースコード

(function ($,window) {
  $(function () {
    $.ajax({
      type:"POST",
      url:"https://awesome-api.server.com/api/login",
      data:{
        "access_key": "hoge",
        "access_secret": "foo"
      },
      headers:{
        'Access-Control-Allow-Headers':'Content-Type,X-Amz-Date,Authorization,X-Requested-With,X-Requested-By,X-Api-Key,X-Auth-Token,Accept',
        'Access-Control-Allow-Methods':'GET,POST,OPTIONS',
        'Content-Type':'application/json'
      }
    }).done(function (data) {
      console.log(data);
    }).fail(function (error) {
      console.log(error);
    });

  })
})(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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Lhankor_Mhy

    2016/06/07 17:03

    Access-Control-Allow-Originヘッダってリクエスト側で設定するんでしたっけ???

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2016/06/07 17:11

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

    キャンセル

  • yohira0616

    2016/06/07 17:20

    Access-Control-Allow-Originヘッダを削って(質問のコード修正済)実行しましたが同じ結果になりました。。。http://stackoverflow.com/questions/25727306/request-header-field-access-control-allow-headers-is-not-allowed-by-access-contr によれば、確かにレスポンス側で設定すべきヘッダですね。

    キャンセル

  • Lhankor_Mhy

    2016/06/07 17:29

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

    キャンセル

回答 3

check解決した方法

0

(function ($,window) {
  $(function () {
    $.ajax({
      type:"POST",
      url:"https://awesome-api.server.com/api/login",
      data:JSON.stringify({
        "access_key": "hoge",
        "access_secret": "foo"
      },
      headers:{
        'Content-Type':'application/json'
      })
    }).done(function (data) {
      console.log(data);
    }).fail(function (error) {
      console.log(error);
    });

  })
})(window.jQuery,window);
  1. dataに渡す引数をJSON#stringifyする 
  2. headerをContent-typeのみにする

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • JavaScript

    19308questions

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

  • jQuery

    7765questions

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

  • Ajax

    1261questions

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

  • HTTP

    625questions

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