Q&A
開発コンソールで通信のリクエストヘッダー、レスポンスヘッダーを確認してもらえますか？
クロスドメインかつ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だけで解決する方法はありますでしょうか？
何卒宜しくお願い申し上げます。
BASIC認証なしの状態では正常に動作するのでしょうか？
これができてないならBASIC認証どうのこうの以前の問題なので。
wtokuno さん
Request Headers には Provisional headers are shown
Response Headers には Access-Control-Allow-Origin: * となっています。
Y.H.さん
アクセス時にPOPするダイアログに BASIC認証の ID/Password を入力すると、正常に動作します。
回答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
総合スコア448
wtokunoさん
ご回答ありがとうございます。
ヘッダー操作をサーバ側で何か処理する必要があるのでしょうか。
以下のURLは読まれましたか？
https://developer.mozilla.org/ja/docs/Web/HTTP/CORS
レスポンスヘッダーについては下記に記載があります。
https://developer.mozilla.org/ja/docs/Web/HTTP/CORS#The_HTTP_response_headers
wtokuno さん
拝読しました。
デベロッパーツールでリソースのレスポンスヘッダーを確認して「Access-Control-Allow-Origin: *」となっているので通っていると思っていました。この認識が間違っておりますでしょうか。
そのレスポンスにはどのようなエラーが出ていますか？
CORSについてはその認識で合ってます。
> それを回避する方式として
以降が、質問に対する直接な回答内容ですよ。
namda さん
レスポンスにはエラーが見当たりません。
Y.H. さん
つまり、このままでは解決しないということですね。
以下にある条件に引っかかるとプリフライトリクエストというのが飛びます。
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などのヘッダを含む
適切なレスポンスを返してください。
wtokunoさん
丁寧な回答をいただきましてありがとうございます。
サーバ側で処理ができるかどうか、確認してみます。
0
試せるjsonpサンプルが無いので微妙ですが
javascript
1 url:"http://username:password@www.example.com/",
的なアクセスはできませんか？
投稿2019/04/17 08:30
総合スコア114814
昔々、セキュリティ上の理由でこの形式は無効にされたのですが、今のブラウザはどうなんでしょう？
https://support.microsoft.com/ja-jp/help/834489/internet-explorer-does-not-support-user-names-and-passwords-in-web-sit
ご回答ありがとうございます。
こちらも試してみましたが、
[Deprecation] Subresource requests whose URLs contain embedded credentials (e.g. `https://user:pass@host/`) are blocked.
が出てしまうため、読み込めませんでした。
↑yambejpさんのスクリプトはbeforeSendを消して試してますか？
namada さん
ご助言ありがとうございます。
はい、削除して試しています。
x_x さん
ありがとうございます。
ChromeだとこのURIを提示されますね。
https://www.chromestatus.com/feature/5669008342777856
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
総合スコア705
namada さん
ご回答ありがとうございます。
この状態ですと、dataType が指定されていないので通信が失敗しました。
dataType:'jsonp' を追加して試しましたが、残念ながら結果は同じでした。
サーバ側がdataTypeが指定していない場合エラーとする処理があるんでしょうか
その場合そこら編の処理も怪しく感じてきますね。
質問のコードが実行されるページでデベロッパーツールを開きconsoleでajax検証のソースをコピペでoverrideMimeType/URL/user/passwdを適切なものにして実行した場合、同じエラーになりますか？
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」でした。
リソースを置いているサーバ側での設定が必要ということになりますか？
CORSポリシー違反ですね。クロスドメインアクセスを許可する必要があります。
サーバー側（ajaxで読み込む方）で他のドメインからアクセスしてきても使っていいよと言う許可を設定する必要があります。
詳しくはwtokunoさんの回答です。
あなたの回答
tips
プレビュー
