ブラウザでoAuth2 apiを呼び出す際に404エラーが発生する

Question

RESTful APIを作成するためにRubyを使用し、認証と承認を処理するためにドアキーパーも使用しました。あなたが知っているように、ドアキーパーはいくつかのOAuth2 apiを生成します。私が使用する必要があるものの2つは/ postユーザーの/ oauth/tokenです。ポストマン、アンドロイドスタジオ、ウェブブラウザでポスト、ゲット、ワークグリーティングを作ったapi。 ドアパネルで生成されたpost api/usersと/ oauth/tokenは、Webブラウザでは動作しませんが、アンドロイドスタジオと郵便配達員にはうまくいきます。 それは私のために混乱しました。このapiを呼び出す間に私が取るエラーは404です、私はサーバー上のルビープロダクションログをチェックしました。文字列は、メソッドとルートの型が正しいことです。

これは私がreactjsで使用したコードです。私はAxiosを使用しました：

var url="http://x.x.x.x/oauth/token"; 
    axios.post(url,{ 
     "username":"1", 
     "password":"password", 
     "grant_type":"password" 
     },{headers:{"Content-Type":"application/json"}}).then((response) => { 
      console.log(response.data); 
     }) 
     .catch((error) => { 
      console.log(JSON.stringify(error)); 
     }); 

また、要求を行い、同じエラーを取得するために生のjQueryを使用しました。すべての私のAPIは、この2つのAPI execptうまく機能：このコードはconsole.log（JSON.stringify（エラー））の

var firstname = document.forms["registerForm"]["first_name"].value; 
    var lastname = document.forms["registerForm"]["last_name"].value; 
    var pass = document.forms["registerForm"]["password"].value; 
    var passconfirm = document.forms["registerForm"]["password_confirmation"].value; 


    var json_data = { 
     "async": true, 
     "crossDomain": true, 
     "url": send, 
     "method": "POST", 
     "headers": { 
      "content-type": "application/json", 
     }, 
     "processData": false, 
     "data": 
     { 
      "user": { 
       "user_name": username, 
       "password": pass, 
       "password_confirmation": passconfirm, 
       "user_type": "admin" 
      }, 
      "profile": { 
       "first_name": firstname, 
       "last_name": lastname 
      } 
     } 
    } 

    $.ajax(json_data).done(function (response) { 
     console.log(response); 
    }); 
    console.log(json_data['data']); 
    console.log(username); 

出力。これは、次のとおりです。

{"config":{"transformRequest":{},"transformResponse":{},"timeout":0,"xsrfCookieName":"XSRF-TOKEN","xsrfHeaderName":"X-XSRF-TOKEN","maxContentLength":-1,"headers":{"Accept":"application/json, text/plain, */*","Content-Type":"application/json;charset=utf-8"},"method":"post","url":"http://x.x.x.x/oauth/token.json","data":"{\"username\":\"1\",\"password\":\"password\",\"grant_type\":\"password\"}"},"request":{}} 

私はブラウザにリクエストヘッダとレスポンスヘッダを見つける：

Response Header: 

Content-Type  
application/json; charset=UTF-8 
Content-Length 
34 
Connection 
keep-alive 
Status 
404 Not Found 
X-Request-Id  
d593b73f-eec8-41cd-95cd-e4459663358c 
X-Runtime 
0.002108 
Date  
Mon, 13 Nov 2017 11:19:26 GMT 
X-Powered-By  
Phusion Passenger 5.1.11 
Server 
nginx/1.12.1 + Phusion Passenger 5.1.11 


Request headers (427 B) 
Host  
x.x.x.x 
User-Agent 
Mozilla/5.0 (X11; Ubuntu; Linu…) Gecko/20100101 Firefox/56.0 
Accept 
text/html,application/xhtml+xm…plication/xml;q=0.9,*/*;q=0.8 
Accept-Language 
en-US,en;q=0.5 
Accept-Encoding 
gzip, deflate 
Access-Control-Request-Method 
POST 
Access-Control-Request-Headers 
Origin 
http://localhost:3000 
Connection 
keep-alive 

Answer 1

そのdocsを確認した後、あなたはkey=valueペアとしてapplication/x-www-form-urlencodedとデータにContent-Typeヘッダを変更する必要があるように見えます：

const data = 'username=1&password=password&grant_type=password'

または単に：

const formData = { 
    username: '1', 
    password: 'password', 
    grant_type: 'password', 
} 

const data = Object.keys(formData) 
    .map(prop => `${prop}=${formData[prop]}`) 
    .join('&') 

最終的な結果は次のようになります。

var url="http://x.x.x.x/oauth/token"; 

axios.post(url, data, { 
    headers: { 
    "Content-Type": "application/x-www-form-urlencoded" 
    } 
}).then((response) => { 
    console.log(response.data); 
}) 
.catch((error) => { 
    console.log(JSON.stringify(error)); 
}); 

Answer 2

あなたは、クライアントのWebアプリケーションへのアクセスを許可するようにOAuthの設定で設定する必要があります。あなたがAPIの応答で得たログやエラーメッセージを確認してください。