XHRリクエストからOAuth2トークンを受け取ります。

Question

XHR-RequestでOAuth2トークンを取得しようとしています（この場合はhttps://developer.paypal.com/docs/integration/direct/make-your-first-call/）。これまでのコード：

 var clientID = <clientID>; 
     var secret = <mySecret>; 

     var oReq = new XMLHttpRequest(); 
     oReq.open("POST", "https://api.sandbox.paypal.com/v1/oauth2/token", true); 

     oReq.setRequestHeader('grant_type', "client_credentials"); 
     oReq.setRequestHeader('Username', this.clientID); 
     oReq.setRequestHeader('Password', this.secret); 
     oReq.setRequestHeader('Content-type', "application/x-www-form-urlencoded"); 
     oReq.setRequestHeader('Accept', "application/json"); 
     oReq.setRequestHeader('Accept-Language', "en_US");   
     oReq.onreadystatechange = function() { 
      if (oReq.readyState === 4) { 
       if (oReq.status === 200) { 
        console.log(oReq.responseText); 
       } else { 
        console.log("Error: " + oReq.status); 
       } 
      }  
     console.log("Status: " + oReq.status); 
     }; 
     console.log("Status: " + oReq.status); 

     oReq.send(); 

悲しいことに、私は401として応答しています。私はすでに同じクライアントIDと秘密でcurlコマンドを試してみました。誰かが私のコードで何が間違っているか教えてもらえますか？

Answer 1

401の応答を取得するリクエストは、POSTリクエストではなく、CORSプリフライトOPTIONSリクエストでは、ブラウザが自動的にそれを自動的に行います。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requestsは、プリフライトを行うには、ブラウザをトリガーするかについての詳細を持っていますが、どのようなそれは、この特定のケースにまで来ると、あなたが認証を行うために要求にgrant_type、Username、およびPasswordリクエストヘッダを追加しているということですneeded-あなたのブラウザはプリフライトOPTIONSリクエストをヘッダーなしで作成します（プリフライトの目的は、リクエストヘッダーを含むリクエストを受信して​​もOKかどうかをサーバーに問い合わせるためです）。

だから、何が起こるかは、以下の（単に説明のために再現使っcurl）です：

ある

$ curl -X OPTIONS -i -H "Origin: http://example.com" \ 
    'https://api.sandbox.paypal.com/v1/oauth2/token' 

HTTP/1.1 401 Unauthorized 
Date: Wed, 09 Aug 2017 09:08:32 GMT 
Server: Apache 
paypal-debug-id: f8963606c5654 
Access-Control-Allow-Origin: http://example.com 
Access-Control-Expose-Headers: False 
HTTP_X_PP_AZ_LOCATOR: sandbox.slc 
Paypal-Debug-Id: f8963606c5654 
Set-Cookie: X-PP-SILOVER=name%3DSANDBOX3.API.1%26silo_version%3D1880%26app%3Dapiplatformproxyserv%26TIME%3D282167897%26HTTP_X_PP_AZ_LOCATOR%3Dsandbox.slc; Expires=Wed, 09 Aug 2017 09:38:32 GMT; domain=.paypal.com; path=/; Secure; HttpOnly 
Set-Cookie: X-PP-SILOVER=; Expires=Thu, 01 Jan 1970 00:00:01 GMT 
Content-Length: 0 
Connection: close 
Content-Type: text/plain; charset=ISO-8859-1 

は、https://api.sandbox.paypal.com/v1/oauth2/tokenエンドポイントが明らかにさえOPTIONS要求の認証が必要です。このため、ブラウザで実行中のフロントエンドJavaScriptコードから直接そのエンドポイントへのリクエストをPOSTリクエストすることはできません。

代わりに、バックエンドコードからリクエストを行う必要があります。