CORSの問題

Question

私は、ユーザーがテレビでGoogleアカウントでサインインできるようにする必要があるので、私はポストマンにはテレビとデバイス（ https://developers.google.com/identity/sign-in/devices）

のためにサインインフローを使用しています

またはカールで、それは正常に動作します。 、ウェブのサインインについては

var data = { 
    client_id: '<my cliendId>', 
    scope: 'email' 
}; 
var r = new XMLHttpRequest(); 
r.open('POST', 'https://accounts.google.com/o/oauth2/device/code', true); 
r.setRequestHeader("Content-type", "application/json"); 
r.onreadystatechange = function() { 
    if (r.readyState === XMLHttpRequest.DONE) { 
     if (r.status === 200) { 
      console.log('hooray!'); 
     } 
     else { 
      console.log('oh no'); 
     } 
    } 
}; 
r.send(JSON.stringify(data)); 

、Googleのページにユーザーをリダイレクトする必要がある。ここでは

XMLHttpRequest cannot load https ://accounts.google.com/o/oauth2/device/code. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http: //localhost:81' is therefore not allowed access. The response had HTTP status code 400.

が私のコードです：しかし、私のブラウザでは、私はこのCORSエラーを取得していますCORSの問題を回避します。しかし、TV /デバイスへのサインインでは、自分のコンピュータにアクセスして許可を得るために、コードを表示してユーザーに表示する必要があります。

なお、このコードはiframe内にあります。私はiframeの外でそれをテストし、同じ問題がありました。

私はsetRequestHeaderを更新UPDATE 'r.setRequestHeader（ "コンテンツタイプ"、 "アプリケーション/ x-www-form-urlencodedで"）;' に送信し、 "r.send（" client_id = & scope = email "）;"に送信します。

• コンソールログは、「HTTPS を私に言っている：//accounts.google.com/o/oauth2/device/codeをなし 『アクセス制御 - 許可 - 起源』ヘッダーが要求に存在している 。リソース。起源「http://localhost:81」がゆえ のアクセスが許可されていません。」、
• デベロッパーツールのネットワークタブが（レスポンスでまだ何も）200 =ステータスコードを示していない、
• しかし、私はr.statusをチェックするコードで私は状態= 0を見ている。

javascriptでTV /デバイス用のGoogleログインを使用する例は誰にも見えますか？

Answer 1

バックエンドサーバーを使用してこれを動作させました。だから、テレビにGoogleのサインインコードを表示するには 1.クライアント（テレビ）は私のサーバーにhttpリクエストを行います。 2.私のサーバーは自分の資格情報である をGoogleに問い合わせます3.私のサーバーへのGoogleの返信、 4.私のサーバはクライアントに応答し、コードが表示されます。

私はまだこれがドキュメントの記述方法ではないと思っていますが、少なくとも今は動作しています。今後の参考のために

Answer 2

問題はCORSではありません。あなたはエラー応答を得ています。エラー応答にはAccess-Control-Allow-Originヘッダーがありません。

ブラウザの開発者ツールを使用して、HTTP応答を検査します。運があれば、本当のエラーメッセージが表示されます。

Answer 3

は、私は同じ問題を持っていた：

問題はChromeがアクセス制御 - 許可 - 起源通過するローカルホストをサポートしていないということです。私の解決策は、ここに記載されているChrome拡張機能をインストールすることでした：No 'Access-Control-Allow-Origin' header is present on the requested resource error

これで、スーパーエージェントでブラウザで要求を行うことができます。