I have a route that needs a token. When I make my Axios call inside of the react app, it returns 401. However, when I grab the parsed header inside of the Network tab it shows:
Bearer ${correctToken}
I grab that entire string, Bearer ${token} and throw it into PostMan and I get the correct object, no 401.
I have tried all the fixes and am now on page 3 of google, the dark abyss.
Any idea how to fix this?
Related
I'm at a loss - I have a django backend and react frontend. On the frontend, I have a login page that sets a JWT token, and I use that token to query data from the django backend. This all works perfectly.
But I also have direct views to these APIs via something simple as http://localhost:8000/tables/data which will just show me a default django view of these tables (ie: a paginated "select * from data" call) ... and hooked in through a genericListAPIView.
Now, as I said, everything works fine when feeding it via a curl command (or postman, or whatnot). I get the JWT token, set it the Authorization access in the subsequent call to the API, and get the data back and do something with in in React.
What I can't seem to figure out is how to hoo that same JWT token when calling trying to access the generic view. When I browse to it, I get
HTTP 401 Unauthorized
Allow: GET, HEAD, OPTIONS
Content-Type: application/json
Vary: Accept
WWW-Authenticate: JWT realm="api"
{
"detail": "Authentication credentials were not provided."
}
Which I guess make sense since I'm not going through any React authentication. Yet, it's the same server. Should be same authentication (and in fact the login accounts are being managed by django).
I've googled, and read (and tried) a bunch of different things and can't seem to wrap my head around what I am doing wrong. Any help, or any direction, would be much appreciated.
When you make a request from a browser, you can only rely on session cookies. The browser is not able to automatically add an access token to the request. In order to make a request with an access token, you have to make it using Javascript.
I created a simple REST API with express and bodyParser which returns a json object on a GET request to the base url. Works fine in the browser and returns what's expected:
API Endpoint: https://jk9j0.sse.codesandbox.io/.
Code: https://codesandbox.io/s/magical-montalcini-jk9j0
Then I setup a basic react app to consume this API by sending a GET request with axios. But on calling the API endpoint above, I get no response. Trying to catch the error.request object, I don't see anything that's clearly incorrect in the headers. The error object itself says 'Network Error'. Not sure why, when the API works as expected in a browser.
Note: When I replace my API url with another one, which is expected to send a similar response, things work great.
The one that works: https://jsonplaceholder.typicode.com/posts/
I haven't created that one, but used it to model my json object.
React Code: https://codesandbox.io/s/hungry-sun-rq94r
I've tried investigating from several angles but no luck. What am I missing here? Do I need to set some headers in the request? Is this a CORS issue?
Yes, it turned out to be a CORS issue. Had to apply header in the API end-point before sending response. res.header("Access-Control-Allow-Origin", "*").
My AngularJS project is working with an API. This API provides authentication tokens (Oauth): an access_token and a refresh_token.
Everytime an AngularJS request to the API returns a 401 error, it means that the access_token has expired and it needs to be refreshed by sending the refresh_token to a specific URL. To do that, I followed this tutorial.
But this is not working and I don't know why. I would like to debug the function placed into .config(...) but I don't know how to do that. console.log() and $rootScope = ... doesn't work here.
Thanks for your help !
Use your browser's built-in debugger.
Chrome: https://developer.chrome.com/devtools/docs/javascript-debugging
Firefox: https://developer.mozilla.org/en-US/docs/Tools/Debugger
Firebug: http://getfirebug.com/javascript
IE: https://msdn.microsoft.com/en-us/library/gg699336%28v=vs.85%29.aspx
I have the problem that even though I set the $http.defaults.headers.common.Authorization to null I am still capable of accessing the [Authorize] part of my Web API 2.0 application.
This problem doesn't arise when I start the application from scratch and try to retrieve the data via an initial GET request. This is when I get an error from the $http callback function.
Any guesses why this is happening? I am quite confident that the bearer token is stored somewhere in the browser and doesn't get deleted properly ...
Chrome (With bearer token):
Chrome (Without bearer token):
Internet Explorer (no bearer Token attribute):
First of all, the authentication property in IE is completely missing. Second, in Chrome everything works perfectly. In IE I have the issue that I can't erase the token for the logout request. The login part with the summary of the regions [Authorize] part works perfectly.
Make sure you haven't also configured jQuery to do this, via something like $.ajaxSetup
Try to check the request that have been set, if any Authentification header is there. Also try to verify that you are using the [Authorize] attribute from System.Web.Http and not System.Web.Mvc
I have a angular app that I needed to redirect outside to a non angular html page, so I thought I could just use the $window.location.hrefto redirect the angular app to my external site. This actually works fine, however, I have a nodejs/express backend that checks for auth token before serving up any content(even static content).
This requires a auth token to be sent in the header of the http request. Now the question:
Can/How do you add an auth token to the request that is made by changing the $window.location.href before it is sent off?
When you use $window.location.href the browser is making the HTTP request and not your JavaScript code. Therefore, you cannot add a custom header like Authorization with your token value.
You could add a cookie via JavaScript and put your auth token there. The cookies will automatically be sent from the browser. However, you will want to review the security implications of using a cookie vs. a header. Since both are accessible via JavaScript, there is no additional attack vector there. Unless you remove the cookie after the new page loads, there may be a CSRF exploit available.
This answer is NOT a safe way, as the token is exposed in the URL, which is logged in browser history, access logs, etc. Use a domain cookie instead. I'll leave the answer as it can be an easy way to debug in your local setup.
I am using JWT as authentication on a Laravel PHP backend, and it works by putting ?token=... in the URL. For example, when using AngularJS with satellizer plug-in, I add ?token=' + $auth.getToken() to the URL.