在浏览器中调用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响应中获得的日志或错误消息。