javascript - 在浏览器中调用 oAuth2 api 时出现 404 错误

Question

我使用 ruby​​ on rails 来制作 RESTful api，还使用 ​​doorkeeper 来处理身份验证和授权。如您所知，看门人生成一些 OAuth2 api，我需要使用的其中两个是/users，这是发布请求和/oauth/token，它为我制作 token 。我制作的 api，即 post、get、put 在 postman 和 android studio 以及 web 浏览器中工作得很好。但是由 doorkeeper 生成的 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 都运行良好，除了这两个 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(error));这是:

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

似乎是因为 CORS 政策。你可以rack-cores .它是一个机架中间件，您将能够向受门卫保护的应用程序发出跨域请求