クロスドメインかつ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だけで解決する方法はありますでしょうか?
何卒宜しくお願い申し上げます。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
下記のような質問は推奨されていません。
- 質問になっていない投稿
- スパムや攻撃的な表現を用いた投稿
適切な質問に修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2019/04/18 01:24

回答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
総合スコア448
下記のような回答は推奨されていません。
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
回答へのコメント
2019/04/18 03:21
2019/04/18 03:22

1
試せるjsonpサンプルが無いので微妙ですが
javascript
1 url:"http://username:password@www.example.com/",
的なアクセスはできませんか?
投稿2019/04/17 08:30
総合スコア112762
下記のような回答は推奨されていません。
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
回答へのコメント
2019/04/17 08:39
2019/04/17 09:00

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
下記のような回答は推奨されていません。
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
回答へのコメント

あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
同じタグがついた質問を見る
JSONP(JSON with padding)は、JSONを使用した関数呼び出しのための仕組み。クロスドメインでのデータの受け渡しが可能です。JavaScriptからクロスドメインで容易にデータを扱うことができます。
JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。
jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。
Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。