在瀏覽器中調用oAuth2 api時出現404錯誤

Question

我在rails上使用ruby來製作RESTful API，並且還使用門衛來處理身份驗證和授權。正如你所知，門衛生成一些OAuth2 api，而我需要使用的其中兩個是/用戶，這是發送請求和/ oauth /令牌爲我製作令牌。我製作的api，post，get，put作品在郵遞員和android工作室以及網頁瀏覽器中都有。 但門衛生成的post api/users和/ oauth/token在web瀏覽器中不起作用，但在android studio和postman上效果很好。 這讓我感到困惑。我在調用這個api時遇到的錯誤是404，我檢查了服務器上的ruby生產日誌，並且它說沒有路由匹配。這裏的字符串的東西是方法和路線的類型是正確的。

這是我在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運作良好execpt這兩個API：

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); 

這段代碼的console.log輸出（JSON.stringify（錯誤））;是這樣的：

{"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後，它看起來像你需要改變Content-Type頭application/x-www-form-urlencoded和數據key=value對：

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

您需要在您的OAuth設置以配置爲允許訪問客戶端的Web應用程序。檢查您在api響應中獲得的日誌或錯誤消息。