Основная авторизация Axios не проходит в Reactjs

Question

В первый раз, спрашивая, так вот я иду.

Я пытаюсь сделать GET-вызов для приложения штурма, созданного моей командой, для которого требуется определенное разрешение. При использовании Почтальон для тестирования и после некоторой конфигурации это все вышло 200.

Results of API call in Postman

Использование локон работал

curl --verbose --user ID:SECRET -H "Accept: application/json" https://api.stormpath.com/v1/tenants/current 
... 
< HTTP/1.1 302 
< Cache-Control: private, no-cache, no-store, max-age=0, no-transform 
< Date: Tue, 10 Jan 2017 09:27:14 GMT 
< Location: https://api.stormpath.com/v1/tenants/TENANTID 
< Pragma: no-cache 
< Stormpath-Request-Id: f8e4dee0-d716-11e6-9795-22000aa92aa2 
< Strict-Transport-Security: max-age=31536000; includeSubDomains; preload 
< X-Frame-Options: SAMEORIGIN 
< Content-Length: 0 
< Connection: keep-alive 
< 
* Connection #0 to host api.stormpath.com left intact 

Но когда я попытался сделать звонок через Axios в React я получаю 401 ошибка.

XMLHttpRequest cannot load https://api.stormpath.com/v1/tenants/current. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 401. 

Это то, что я использовал:

axios({ 
method: 'get', 
url: "https://api.stormpath.com/v1/tenants/current", 
auth: 
{ 
    username: 'api ID', 
    password: 'api Secret' 
} 
}) 

Я не знаю, почему, но это не обеспечивая имя пользователя и пароль в соответствии с ответом я получил.

code:401 
developerMessage:"Authentication with a valid API Key is required." 
message:"Authentication required." 
moreInfo:"http://www.stormpath.com/docs/quickstart/connect" 
requestId:"3686f590-d69e-11e6-9b8a-22000a8ce5d1" 
status:401 

Похоже, вопросы были заданы раньше, но ответов на них пока нет.

Reactjs Axios/Spring boot security

Cannot Basic Auth from React App with Axios or SuperAgent

Basic authentication : failure supergaent+OSX , success on superagent+Redhat , success on Postman+OSX,

спасибо за что нашли время, чтобы прочитать это.

Answer 1

Хорошо, поэтому я не мог понять, почему axios auth call не работал, но я нашел способ пройти. То, что я сделал, это сделать API API API внутри express вместо React.

Так что происходит React делает звонок на мой сервер localhost.

axios.get("/secret") 
    .then(
     function(response) 
     { 
      console.log(response) 
     } 
    ) 

Затем узел/экспресс-сервер улавливает его и запускает вызов API, который я хочу. Я использовал request и cors

app.use(cors()); 

... 

app.get('/secret', function(req, res){ 

    var queryUrl = "https://api.stormpath.com/v1/tenant/current; 
    request({url:queryUrl, auth: { 
    user: ID, 
    pass: SECRET 
    }}, function(err, response, body){ 

     if(!err && response.statusCode == 200){ 
      info = JSON.parse(body); 
      res.send(info); 
     } 
     else{ 
      res.send(err) 
     } 
    }) 
}) 

И он работал со всеми stormpath API URL-адресов, которые мне нужны.

Answer 2

Получил эту же проблему пару месяцев назад и в конечном итоге с тем же решением. Я думаю, что это связано с корсом в интерфейсе, так как вы пытаетесь попасть в другой домен для api.

И вы добавляете некоторые пользовательские данные аутентификации в заголовок, поэтому вам может понадобиться использовать «withCredentials: true» при совершении вызова. Тогда это вызовет проблему с запросом опционных опций. И я не думаю, что он должен работать в интерфейсе. Надеюсь, эта помощь.