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

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

新規登録して質問してみよう
ただいま回答率
85.49%
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回答

5533閲覧

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

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

クロスドメインかつ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

2019/04/17 09:16

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

2019/04/18 01:24

BASIC認証なしの状態では正常に動作するのでしょうか? これができてないならBASIC認証どうのこうの以前の問題なので。
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

0

ベストアンサー

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

総合スコア448

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

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

viola_violon

2019/04/18 00:59

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

2019/04/18 03:09

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

2019/04/18 03:21

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

2019/04/18 03:22

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

2019/04/18 03:34

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

2019/04/18 03:37

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

0

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

javascript

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

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

投稿2019/04/17 08:30

yambejp

総合スコア114721

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

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

viola_violon

2019/04/17 08:55 編集

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

総合スコア705

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

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

viola_violon

2019/04/17 09:45

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

2019/04/17 09:52

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

2019/04/18 02:52

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.49%

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

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

質問する

関連した質問