XMLHttpRequestでBasic認証の付いているサーバーに対しapiを叩く

Question

laravelで作成したapiをjsのXMLHttpRequestを使って叩こうとしています。
サーバー側とクライアント側は違うサーバーで運用しており、共にbasin認証がかけてあります。

サーバー側

laravelを使って作成しています。 Corsの許可をおこなっているmiddlewareは以下です。

// middleware/Cors.php
    public function handle($request, Closure $next)
    {
        return $next($request)
            ->header('Access-Control-Allow-Origin','*')
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
            ->header('Access-Control-Allow-Headers', 'Origin, Content-Type, Accept, Authorization, X-Requested-With')
            ->header('Access-Control-Allow-Credentials', 'true');
    }

クライアント側

jsのXMLHttpRequestを使って叩いています。

  var request = new XMLHttpRequest();
  // URLを開く
  request.open('GET', url , [true,clientId,clientSecret]);
  request.responseType = 'json';

  // レスポンスが返ってきた時の処理を記述 
  request.onload = function () {
    // レスポンスが返ってきた時の処理
    //省略
  }
  // リクエストをURLに送信
  request.send();

エラー内容

index.php:1864 GET http://サーバーurl 401 (Unauthorized)
 (anonymous) @ index.php:1864
 mightThrow @ jquery-3.4.1.js:3557
 process @ jquery-3.4.1.js:3625
 setTimeout (async)
 (anonymous) @ jquery-3.4.1.js:3663
 fire @ jquery-3.4.1.js:3291
 fireWith @ jquery-3.4.1.js:3421
 fire @ jquery-3.4.1.js:3429
 fire @ jquery-3.4.1.js:3291
 fireWith @ jquery-3.4.1.js:3421
 ready @ jquery-3.4.1.js:3901
 completed @ jquery-3.4.1.js:3911
index.php:1 Access to XMLHttpRequest at 'http://サーバーurl' from origin 'サーバーurl' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

やってみたこと

• setRequestHeaderを使ってbasin認証の情報を付与する。

var authorizationBasic = window.btoa(clientId + ':' + clientSecret);

request.open('GET', 'url', true);
request.responseType = 'json';
request.setRequestHeader('Authorization', 'Basic ' + authorizationBasic);

• Postmanから叩いた場合はデータが取れます。この事からサーバー側の問題ではないのではないかと考えています。

• 開発時にlocalhostで実装した際には動いており、サーバーに乗せたときに動かなくなった為、basic認証周りではないのかと考えていますが、いくつかのXMLHttpRequestにbasic認証情報を与える試しましたが反応がなく困っております。

問題の本質が見切れていない状態ですが困ってしまいました。何か気になる方でも構いません。回答よろしくお願い致します。

解決方法

withCredentialsプロパティをtrueに設定する。
この際にサーバー側の'Access-Control-Allow-Origin'の設定がワイルドカード(*)になっているとエラーが発生するので、クライアント側のドメイン指定のみにしてあげる必要がありました。

// URLを開く
  request.open('GET', url, [true, clientId, clientSecret]);
  request.responseType = 'json';
  request.withCredentials = true;

Answer 1

直接の原因は、withCredentialsプロパティをtrueにしていないことだと思います。プリフライトを回避するには、「やってみたこと」の方法ではだめで、もとの方法なら大丈夫です。
また、BASIC認証を伴うCORSについては以下のQ&Aも参考になると思います。

BASIC認証をかいくぐってCORSしたい｜teratail

Comments

[zushi0905]

withCredentialsプロパティを追加したところ無事動きました。
リンク先の情報もとても参考になりました、ありがとうございます。

Answer 2

jsでbasic認証突破するということは生のユーザー名とパスワードを
さらすということですから別の意味でセキュリティ上問題があります。
運用方法を検討しなおしたほうがよいと思います。

※ユーザー名パスワードを手動で入力するUIを想定しているのでしたら
的はずれな回答になりますのでスルーしてください

Comments

[zushi0905]

こちらは最終的にはbasic認証を外す予定でして、今現在の段階ではクライアント、サーバー共にbasic認証をかけて運用している為大丈夫と考えています。
実際に運用する際に残さないように気をつけます。アドバイスありがとうございます。

Answer 3

Authorization:など、特別なヘッダを付けてクロスドメインのリクエストを行う場合、

1. OPTIONSによって、そのヘッダを受け入れられるかを問い合わせるプリフライトリクエストが飛ぶ
2. 1の結果で受け入れられるとなれば、本来のリクエストを投げる

という流れで進みます（MDN）。ということで、Authorization:を使うBasic認証などをクロスドメインで通すには、OPTIONSにBasic認証なしで応答できる必要があります。多くの環境では、現実的に実装が難しいかもしれません。

Comments

[zushi0905]

徳丸先生の回答にて解決することが出来ました。回答ありがとうございました。