Axios basic authorization not going through in Reactjs

Question

First time asking so here I go.

I'm trying to make a GET call to a stormpath app my team made which requires some authorization. When using Postman to test and after some configuration it everything came out 200.

Results of API call in Postman

Using curl worked

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

But when I tried to make a call through Axios in React I get a 401 error.

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.

This is what I used:

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

I don't know why but it's not delivering the username and password according to the response I got.

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

It appears similar questions has been asked before but there are still no responses for them.

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,

Thanks's for taking the time to read this.

Answer 1

Okay so I couldn't figure out why axios auth call wasn't working but I found a way to get through. What I did was make the auth API call inside express instead of in React.

So what is happening is React makes a call to my server localhost.

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

Then node/express server catches it and runs the API call I want. I used request and 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)
        }
    })
})

And it worked with all the stormpath API URLs that I need.

Answer 2

Got this same problem couple months ago and end up with the same solution. I think it related to cors in the front end since you try to hit other domain for the api.

And you add some custom auth data to the header, so you may need to use 'withCredentials: true' when you make the call. Then it will cause a preflight options call issue. And I don't think it should handle in the front-end. Hope this help.