teratail
回答率
85.68%
質問するログイン新規登録

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

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

新規登録して質問してみよう
ただいま回答率
85.68%
トップJSONPに関する質問
JSONP

JSONP（JSON with padding）は、JSONを使用した関数呼び出しのための仕組み。クロスドメインでのデータの受け渡しが可能です。JavaScriptからクロスドメインで容易にデータを扱うことができます。

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回答

4660閲覧

クロスドメインかつBASIC認証のかかったリソースにajaxでアクセスする方法

viola_violon
viola_violon

総合スコア9

JSONP

JSONP（JSON with padding）は、JSONを使用した関数呼び出しのための仕組み。クロスドメインでのデータの受け渡しが可能です。JavaScriptからクロスドメインで容易にデータを扱うことができます。

JavaScript

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

jQuery

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

Ajax

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

1グッド

4クリップ

投稿2019/04/17 08:08

1

4

クロスドメインかつBASIC認証のかかったリソースにajaxでアクセスする方法を、いろいろと試しておりますがなかなかうまくいきません。

データは、パラメータ等をつけてアクセスするとJSONP形式で吐かれるAPIです。

JavaScript
1$.ajax({
2	type:'GET',
3	url:APIurl,
4	dataType:'jsonp',
5	jsonpCallback:'callback',
6	cache:false,
7	async:true,
8	beforeSend: function(xhr){
9		xhr.setRequestHeader('Authorization', 'Basic ' + btoa('username:password'));
10	}
11}).done(
12	function(data){
13		～以下、成功時の処理～

のような書き方をしています。
xhrの中身を見てみると、setRequestHeader 内に値はセットされていますが、認証の ID/Password を求められます。

JavaScriptだけで解決する方法はありますでしょうか？

何卒宜しくお願い申し上げます。

x_xが👍を押しています

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

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

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

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

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。

wtokuno
wtokuno

2019/04/17 09:16

開発コンソールで通信のリクエストヘッダー、レスポンスヘッダーを確認してもらえますか？
Y.H.
Y.H.

2019/04/18 01:24

BASIC認証なしの状態では正常に動作するのでしょうか？ これができてないならBASIC認証どうのこうの以前の問題なので。
viola_violon
viola_violon

2019/04/18 02:05

wtokuno さん Request Headers には Provisional headers are shown Response Headers には Access-Control-Allow-Origin: * となっています。 Y.H.さん アクセス時にPOPするダイアログに BASIC認証の ID/Password を入力すると、正常に動作します。
guest

回答3件

3

ベストアンサー

AJAXでクロスドメイン通信するにはいろいろ制限があって、
サーバー側でクロスドメイン通信を許可するヘッダが付与されていないとできません。

https://developer.mozilla.org/ja/docs/Web/HTTP/CORS

それを回避する方式としてJSONPみたいなハックがあるわけですが、
JSONPは動的に<script>タグを追加する方法なので、ヘッダーを操作できません。

Basic認証がある場合、https://teratail.com/questions/184968#reply-274976 の回答のように
URL に埋め込む方法が考えられますが、この方法がブラウザでブロックされているとなると
JSONPでダイアログなしにBasic認証を通すのは無理そう。

投稿2019/04/17 10:59

wtokuno
wtokuno

総合スコア448

Y.H., viola_violon, namdaが👍を押しています

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

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

このような回答には修正を依頼しましょう。

また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。

回答へのコメント

viola_violon
viola_violon

2019/04/18 00:59

wtokunoさん ご回答ありがとうございます。 ヘッダー操作をサーバ側で何か処理する必要があるのでしょうか。
viola_violon
viola_violon

2019/04/18 03:09

wtokuno さん 拝読しました。 デベロッパーツールでリソースのレスポンスヘッダーを確認して「Access-Control-Allow-Origin: *」となっているので通っていると思っていました。この認識が間違っておりますでしょうか。
namda
namda

2019/04/18 03:21

そのレスポンスにはどのようなエラーが出ていますか？
Y.H.
Y.H.

2019/04/18 03:22

CORSについてはその認識で合ってます。 > それを回避する方式として 以降が、質問に対する直接な回答内容ですよ。
viola_violon
viola_violon

2019/04/18 03:34

namda さん レスポンスにはエラーが見当たりません。 Y.H. さん つまり、このままでは解決しないということですね。
wtokuno
wtokuno

2019/04/18 03:40 編集

以下にある条件に引っかかるとプリフライトリクエストというのが飛びます。 Authorizationヘッダは許されていないヘッダなのでこの条件に引っかかります。 https://developer.mozilla.org/ja/docs/Web/HTTP/CORS#Preflighted_requests https://teratail.com/questions/184968#reply-274998 の回答に 以下のエラーが出ているとコメントされていますが、 > Access to XMLHttpRequest at [リソースURI] from origin [対象ページのドメイン] has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status. このエラーはプリフライトリクエストのレスポンスがOKじゃなかったというエラーです。 サーバ側でプリフライトリクエストを適切に処理し、 Access-Control-Allow-Methods、Access-Control-Allow-Headersなどのヘッダを含む 適切なレスポンスを返してください。
viola_violon
viola_violon

2019/04/18 03:37

wtokunoさん 丁寧な回答をいただきましてありがとうございます。 サーバ側で処理ができるかどうか、確認してみます。
guest

1

試せるjsonpサンプルが無いので微妙ですが

javascript
1  url:"http://username:password@www.example.com/",

的なアクセスはできませんか？

投稿2019/04/17 08:30

yambejp
yambejp

総合スコア112762

namdaが👍を押しています

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

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

このような回答には修正を依頼しましょう。

また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。

回答へのコメント

viola_violon
viola_violon

2019/04/17 08:55 編集

ご回答ありがとうございます。 こちらも試してみましたが、 [Deprecation] Subresource requests whose URLs contain embedded credentials (e.g. `https://user:pass@host/`) are blocked. が出てしまうため、読み込めませんでした。
namda
namda

2019/04/17 09:00

↑yambejpさんのスクリプトはbeforeSendを消して試してますか？
guest

0

beforeSendを使った書き方であってるはずです。
質問にあるコードで以下のajax検証のほうのサンプルコードで最小限のオプションで通信できるか確かめてみてください。

なお下コードは
http://leggiero.sakura.ne.jp/xxxxbasic_auth_testxxxx/
のサイトにBASIC認証のサンプルページが有ったので使わせてもらったところ動きました。

上記ページでF12を押してDeveloperツールのconsole画面で以下の2つのスクリプトを実行の結果BASIC語のページを読み込めました。

js
1/*JQueryのロード*/
2src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js";
3sc = document.createElement("script");
4sc.type="text/javascript";
5sc.src=src;
6document.body.appendChild(sc);
js
1/*ajax検証*/
2    $.ajax({
3        beforeSend: function (xhr) {
4            xhr.overrideMimeType('text/html;charset=Shift_JIS');
5            xhr.setRequestHeader ("Authorization", "Basic " + btoa('kaiin:naisho'));
6        },
7        url: 'http://leggiero.sakura.ne.jp/xxxxbasic_auth_testxxxx/secret/kaiin_page_top.htm',
8        type: 'GET'
9    })
10        .done((data, textStatus, jqXHR) => {
11            console.log(data);
12 
13        })
14        .fail((jqXHR, textStatus, errorThrown) => {
15            console.log(jqXHR.status);
16        })

投稿2019/04/17 09:22

namda
namda

総合スコア705

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

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

このような回答には修正を依頼しましょう。

また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。

回答へのコメント

viola_violon
viola_violon

2019/04/17 09:45

namada さん ご回答ありがとうございます。 この状態ですと、dataType が指定されていないので通信が失敗しました。 dataType:'jsonp' を追加して試しましたが、残念ながら結果は同じでした。
namda
namda

2019/04/17 09:52

サーバ側がdataTypeが指定していない場合エラーとする処理があるんでしょうか その場合そこら編の処理も怪しく感じてきますね。 質問のコードが実行されるページでデベロッパーツールを開きconsoleでajax検証のソースをコピペでoverrideMimeType/URL/user/passwdを適切なものにして実行した場合、同じエラーになりますか？
viola_violon
viola_violon

2019/04/18 00:53

namada さん すみません、エラーの内容を書き忘れていました。 Access to XMLHttpRequest at [リソースURI] from origin [対象ページのドメイン] has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status. となり、jqXHR のステータスは「0」でした。 リソースを置いているサーバ側での設定が必要ということになりますか？
namda
namda

2019/04/18 02:52

CORSポリシー違反ですね。クロスドメインアクセスを許可する必要があります。 サーバー側（ajaxで読み込む方）で他のドメインからアクセスしてきても使っていいよと言う許可を設定する必要があります。 詳しくはwtokunoさんの回答です。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.68%

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

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

質問する

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

JSONP

JSONP（JSON with padding）は、JSONを使用した関数呼び出しのための仕組み。クロスドメインでのデータの受け渡しが可能です。JavaScriptからクロスドメインで容易にデータを扱うことができます。

JavaScript

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

jQuery

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

Ajax

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

トップJSONPに関する質問

クロスドメインかつBASIC認証のかかったリソースにajaxでアクセスする方法