Fehler 404 beim Aufruf von oAuth2 api im Browser

Question

Ich habe Ruby auf Rails verwendet, um RESTful API zu erstellen, und habe auch Doorkeeper verwendet, um Authentifizierung und Autorisierung zu behandeln. Wie Sie wissen, erzeugt der Türsteher einige OAuth2-APIs, und die beiden, die ich verwenden muss, sind/users, was die Post-Anfrage und/oauth/Token ist, die Token für mich machen. Die api, die ich mache, die post sind, bekommen, setzen arbeiten in postman und android studio und web browser. Aber die post api/users und/oauth/token, die vom Türsteher erzeugt wurde, funktioniert nicht im Webbrowser, aber funktioniert gut auf Android Studio und Postbote. Das war für mich verwirrt. Der Fehler, den ich beim Aufrufen dieses APIs erhalte, ist 404. Ich habe das Ruby-Produktionsprotokoll auf dem Server überprüft und es wird keine Route gefunden. Die String-Sache hier ist, dass die Art der Methode und Routen korrekt ist.

Dies ist der Code, den ich in den reactjs verwendet habe. Ich benutzte 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)); 
     }); 

Und auch verwendet rohe jQuery, um Anfrage zu machen und den gleichen Fehler zu bekommen. Alle meine api funktioniert gut execpt dieser beiden 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); 

die Ausgabe dieses Codes console.log (JSON.stringify (Fehler)); das ist:

{"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":{}} 

ich den Request-Header und Response-Header in den Browser finden:

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

Nach ihrer docs Überprüfung, es sieht aus wie Sie Content-Type Header application/x-www-form-urlencoded und Daten als key=value Paar ändern müssen :

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

oder einfach:

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

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

Endergebnis wäre:

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

Sie müssen in Ihren OAuth-Einstellungen konfigurieren Zugriff auf Client-Web-App zu ermöglichen. Überprüfen Sie Protokolle oder Fehlermeldungen, die Sie in einer API-Antwort erhalten.