純粋なHTMLフォームの作品は、Ajaxで同じクエリがリクエストを送信ん

Question

このHTMLフォームを失敗し、Googleの認証が動作します。ただし、レスポンスのコンテンツ（JSON）がブラウザに表示され

<form action="/auth/google" method="get"> 
    <button type="submit"> 
     Login with google 
    </button> 
</form> 

、何らかの理由でHTMLページのように、現在のページを置き換えます。 フォームが送信されないようにすると（つまり e.preventDefault()）、何も起こりません。私はJSONをどう捕まえるべきかわかりません。

だから私はアヤックス

<button type="submit" id="btnGoogle"> 
    Login with google 
</button> 

<script> 

    $('#btnGoogle').click((e) => { 

     $.ajax({ 
       type: "GET", 
       url :"/auth/google", 
       dataType : "json", 
       crossDomain : true, // no effect 
       headers : { 
        // Tried many headers, no effect 
       } 
      }) 
      .success((data) => { 
       console.log("Success!", data)) 
      }) 
      .error((err) => { 
       console.error(err.statusText); 
      }) 
     }); 

    </script> 

を使用して、同じコールをしようが、私はXMLHttpRequestのは https://accounts.google.com/o/oauth2/v2/auth?response_type=code&redirect_urをロードすることはできません

クロスドメインエラーが発生します... D = 178168129307-5g50gah2he0gjjl2or73a1va8ha66s24.appsよ.googleusercontent.com。 要求された リソースに 'Access-Control-Allow-Origin'ヘッダーが存在しません。したがって、オリジン 'http://localhost:8100'は許可されません。 ノード/ Expressサーバ上で

：

app.get('/auth/google', 
    passport.authenticate('google', { 
     scope: ['https://www.googleapis.com/auth/plus.profile.emails.read'] 
    })); 

どうして同じパラメータで非常に同じサーバールートに到達したHTMLフォームは、それを行いますが、Ajax呼び出しではないでしょうか？

編集

私はそう...うん、それは一種の動作しますが、通常のHTMLフォームがないのに対し、なぜAjax呼び出しは、これを必要ない、CORS extension for Chromeをインストールすることで回避策を発見しましたか？

Answer 1

再：

あなたの基本的なajax呼び出しがプロセス・サーバーは、まったくリダイレ​​クトすることはできませんので、GoogleのOAuthシステムからのリダイレクトを処理することはできません。通常のHTMLフォーム」はないのに対し、なぜAjax呼び出しは、これが必要ありません私は、ログインリンクはアヤックスで扱うと、ブラウザは、任意のリダイレクトを処理するために許可されていないことを保証しなければならなかったすべてのOAuthプロバイダの問題を回避するには。

。

外部ログインを処理するためにiframeを使用して、後続のリダイレクトはSPAのように見せたい場合は別のオプションになります。