ブラウザーはドメインをまたぐ要求のcredentialsを使います.

2510 ワード

振り回される

-時間の起源-
この間、簡単なサイトを作って、遠隔のアプリサービスを訪問します.
そうします.まず、nodejsサービスを構築して、フロントエンドページを実行します.ログインをお願いした時に、成功した情報を返すことができます.そして、他のインターフェースの読み取りを再度要求した時、戻ってきた情報は確かにまだ登録されていません.この時、私は顔をしかめました.登録したのに.それはブラウザの仕組みの問題であると偶然に知った.
-初歩的解決-
大体の意味は、デフォルトの場合、標準的なクロスドメイン要求は、クッキーなどのユーザ認証証明書を送信しないということである.したがって、再度リモートアプリにアクセスすると、クッキーは持ち込まれないので、サーバは当然、まだログインしていないと思います.MDN上の簡単な紹介 credentials .XMLHttpRequestで要求する時、私達は属性withCredentials=trueを設定したいです.

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.xxx.com/api');
xhr.withCredentials = true;
xhr.onload = onLoadHandler;
xhr.send();

そうすると、クッキーに関する情報が持ち込まれます.
なお、この属性がtrueの場合は、リモートサーバも対応します.応答ヘッダに設定 Access-Coontrol-Alllow-Chredentials:true.この設定がないと、ブラウザからエラーが発生します.
-新しい問題を導入する-
そしてもう一つの説明が必要なのは、サーバーがAccess-Coontrol-Chredentials:trueを設置した後、Access-Coontrol-Ollow-Originは**に設定できなくなりました.このようにすると、リモートサービスはブラウザのドメイン外訪問を許可するように設定すべきです.この属性がこのように設定できないと、どうすればいいですか?そこで私は調べたり調べたりして、やっとこの問題を完璧に解決しました.
-再解決-
Access-Coontrol-Allow-Originの役割は、特定のホワイトリストのユーザー(ブラウザ)が私のこのインターフェースにアクセスできるようにすることです.を設定すると、すべてのユーザーがアクセスできるということです.値がhttp://xxx.com'は、このドメイン名からの要求だけを受け入れるという意味で、他のものは一切拒否します.私達が欲しい効果は＊に設定したいです.Access-Coontrol-Alllow-Chredentials:trueを使ってから、Access-Coontrol-Alllow-Origin:*'を設定できなくなりました.すべて、私達は考えを変えてもいいです.aユーザーが入る時、aユーザーをホワイトリストに設定すればいいです.つまり、誰が訪問したら、誰をホワイトリストにしますか?ブラウザがドメイン間要求を行うと、サーバは、要求のドメインを示すOrigin属性のそれぞれの要求ヘッダを取得することができる.私たちはこのドメインをホワイトリストにすればいいです.サーバー言語ごとの設定方法は異なるかもしれませんが、原理は同じです.大体次の通りです

responce.set('Access-Control-Allow-Origin', request.get('origin'));

はい.OKです.洗って寝てもいいです.
-----------------------------------------
ノート:上にあるのは原生のajaxを使ってお願いします.実際にはjqueryなどのフレームを選ぶ人が多いです.以前はbeforeSendメソッドにxhr.withCredentials=trueを設定していました.そして悲劇的に私の予想通りの効果が得られないことを発見しました.実は、このように使うのではありません.属性として、メソッドではなく設定するべきです.ダタ属性と並んでセットすればいいです.だからこのように見えます.

function func() {
        $.ajax({
            type: "GET",
            dataType: "json",
            xhrFields: {
                withCredentials: true    //       
            },
            url: 'https://xxx.com/api/login',
            success: function (data) {

            },
            beforeSend: function (xhr) {
//                       
//                xhr.withCredentials = true;
            },
            error: function (err) {
                alert(JSON.stringify(err))
            }
        })
    }

はい、物語は終わりました.タイプを打つのはとても疲れて、本当に洗って寝ます.

thunk関数とcoフレームを徹底的に理解する