I'm trying to logout my user once they get a 401. I'm using axios to return data from the api
I was looking around and found the same axios.interceptors.response
axios.interceptors.response.use(
response => response,
error => {
const {status} = error.response;
if (status === 401 ) {
store.dispatch('snackBar', snackbarObj)
}
return Promise.reject(error);
}
)
It appears my error.response is undefined. I'm not sure what is wrong? any ideas?
You're not getting a response from the request you're doing with Axios since the browser received a 401 unauthorized response when doing the preflight OPTION request, resulting in a Network Error for the request you're trying to do.
This is related to how CORS works and how your backend handles OPTION requests. To understand how the backend server should handle preflight requests, it's important to understand what is the motivation behind introducing preflight requests.
The backend server should not check for authentication on OPTION requests, it should validate that the request is being made to an endpoint that accepts cross-domain requests and return a success code if it does.
Then, automatically, the browser will proceed with the initially intended request.
That way, the Axios interceptor will receive the 401 error code if the user is no longer authenticated.
Shameless self-promotion, I've published a simple Axios plugin called axios-middleware which helps abstract the use of Axios interceptors in bigger apps. It offers an example of middleware that automatically handles unauthenticated requests by trying to authenticate again before resending the request.
Response object will be undefined also if preflight OPTION request ended successfull, but response for next GET/POST doesn't contain Access-Control-Allow-Origin http-header.
In my case adding Access-Control-Allow-Origin header for nginx 401 response solves problem
For those who still struggling with this, use the following error handling for better control
if (error.response) {
// Request made and server responded
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
// The request was made but no response was received
console.log(error.request);
} else {
// Something happened in setting up the request that triggered an Error
console.log('Error', error.message);
}
return Promise.reject(error);
it is not best practice but i solve it this way
axios.interceptors.response.use(
response => response,
error => {
if (typeof error.response === "undefined") {
// do somthing
}
return Promise.reject(error);
}
)
Related
I have a js client (vuejs) and a backend using DRF both in local.
I use this package to generate the token : https://github.com/davesque/django-rest-framework-simplejwt
I use this package https://www.npmjs.com/package/axios-auth-refresh to handle refresh token logic.
The main goal is to intercept a request when it return a 401 response, perform a refresh token request and then resolve the orginal request with the new token.
It works when the original request is a GET request but not when it is a POST request.
When using a POST request :
The orgin request fall in 401 when the token expire then the interceptor occur but the server respond with 405 method not allowed:
-https://imgur.com/C1tchvb
the method from the request from the interceptor does not match the method in the code shown above (line 3 & 4) : as you can see the server receive the payload from the origin request as method of the request :
-https://imgur.com/nlAknMi
I found this post : App Script sends 405 response when trying to send a POST request
i try to change the headers as advised but it did not work
How is the payload from the orginal resquest becoming the method of the interceptor when the origin request is a Post request with a payload ?
Here the code from the javascript client :
const refreshAuthLogic = failedRequest => axios(
{
method: 'post',
url: 'auth/refresh',
data: { refresh: store.state.token.refresh }
}).then(tokenRefreshResponse => {
store.dispatch('refreshToken', tokenRefreshResponse.data)
return Promise.resolve()
})
const instance = axios.create({
baseURL: '/api/'
})
instance.interceptors.request.use(config => {
config.headers.Authorization = `Bearer ${store.state.token.access}`
return config
})
createAuthRefreshInterceptor(instance, refreshAuthLogic)
EDIT
I manage to get it work but i don't really understand:
the problem is related to DJANGO/ DRF and not axios
it seems that when a POST request is done and fail ( here with 401) the server keeped the data.
Here the part i can't explain :
when the request of the interceptor (to refresh token) hit the server, it messes with the data of previous request.
I had to add a middleware in django to clear the body when the request fails with 401 and it worked for me. But it is not a proper solution i guess.
Unfortunately the lib is loosely mantained and it's flawed in some aspects.
Eg: concurrent requests are not correctly queued when the request is sent with and invalid token but the response arrives when a new token is already issued.
As is, if you look at the lib source, you'll find in the very first lines:
/** #type {Object} */
const defaults = {
/** #type {Number[]} */
statusCodes: [
401 // Unauthorized
]
};
This means that only 401 code is managed and the statusCodes are not exported so them remains private.
If you want to continue to use this library you can fork it in order to change what does not fit with your stack or simply copy the source, edit it and use it as a local service.
I'm calling a REST API that has CSRF protection.
Everything works well. I'm getting the token and sending it back to the server.
However, when I do the very first request or when the CSRF Cookie is not set in the browser it always throws an HTTP 403 error.
This is because I didn't send CSRF token back given that this is the very first request in which the server sends the Set-Cookie header to set the CSRF Cookie.
What would be the best way to avoid this error the first time we send a request to a CSRF-protected API?
Should I check every time if the CSRF Cookie is set in the browser before sending any request?
You can do something like this. This is a dummy script.
checkIfAuthenticated()
.then( token => {
// user is authorized. use token
})
.catch( err => {
// oops. not authorized probably. authenticate user here.
});
// and your checkifAuthenticated:
function checkifAuthenticated() {
return new Promise((resovle, reject) => {
// perform a http request here to /api?checkauth
if(api_returned_401) {
reject('not authenticated');
} else {
resolve(tokenOrInfo);
}
});
}
My browser is logging the following message in the devtools console:
No 'Access-Control-Allow-Origin' header is present on the requested resource.… The response had HTTP status code 503.
Background: I have two apps. One that is an Express Node application connected to a Mongo database. The other is a basic web application that makes POST requests to the Node application via the Fetch API to get data from Mongo.
Issue: Though I receive no CORS errors on my local machine, I am given the error below as soon as I deploy my basic web application to production. The web application that makes a POST request to the Node app and gives me this:
The POST request does seem to work and the data is saved into Mongo but this error is being marked as a "Critical Error" in Heroku and is quite annoying.
I realize that I could set the no-cors option in Fetch but I believe that it is required since I am making a request to a url that is different than the origin. Right?
Express Node App Code
In my app.js file I have set the correct headers to ensure that other applications can make requests from different origins
app.js
// Add headers so we can make API requests
app.use(function (req, res, next) {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
res.setHeader('Access-Control-Allow-Credentials', true);
next();
});
routes/api/api.js
router.post('/users/:url/upload-csv/:csv_name', (req, res) => {
let csv_name = req.params.csv_name;
let csv_string = csv_name+req.body.csv_string;
User.findOne({url: req.params.url})
.then((user) => {
if (user.csv_files.length === 0) {
user.csv_files.push(csv_string);
} else {
let foundExistingCSV = false;
for (var i = 0; i < user.csv_files.length; i++) {
if (user.csv_files[i].includes(csv_name)) {
foundExistingCSV = true;
user.csv_files[i] = csv_string;
break;
}
}
if (!foundExistingCSV) user.csv_files.push(csv_string);
}
user.markModified('csv_files');
user.save();
res.status(204);
})
.catch((err) => {
console.log(err);
res.status(400);
});
});
Basic Web App Code
POST request I am making
utils.js
utils.exportToMongo = functions(table, name) {
var exportPlugin = table.getPlugin('exportFile');
var csv_string = exportPlugin.exportAsString('csv');
// Upload the CSV string and its name to Users DB
fetch(`${utils.fetchUserURL()}/upload-csv/${name}`, {
method: 'POST',
body: JSON.stringify({csv_string: csv_string}),
headers: new Headers({
'Content-Type': 'application/json',
Accept: 'application/json',
})
}).then((res) => {
return {};
}).catch((error) => {
console.log(error);
return {};
});
}
How can I remove the 503 error? Any insight would be greatly appreciated!
An HTTP 5xx error indicates some failure on the server side. Or it can even indicate the server just isn’t responding at all — e.g., a case might be, your backend tries to proxy a request to a server on another port, but the server is not even be up and listening on the expected port.
Similarly, a 4xx indicates some problem with the request prevented the server from handling it.
To confirm, you can try making the same request using curl, or Postman, or something, and see if you get a 2xx success response for the request, rather than a 5xx or 4xx.
Regardless, if you see a 5xx or 4xx error on the client side, some message should get logged on the server side to indicate what failed and why. So to identify what triggered the 5xx/4xx error, check server logs to find messages the server logged before it sent the error.
As far as CORS error messages go, it’s expected that in most cases for a 5xx or 4xx error, servers won’t add the Access-Control-Allow-Origin response header to the response; instead the server most likely will only send that header for 2xx and 3xx (redirect) responses.
So if you get the cause of an 5xx/4xx error solved such that you can get a success response, you may find your CORS config is already working fine and you’ve got nothing left to fix.
I had the same issue, the server doesn't support cross origin request. The API developer should change Access-Control-Allow-Origin to * (means from any origin).sometimes jsonp request will bypass, if its not working, google chrome provides plugins to change origin
plugin
Background
I'm using visionmedia/superagent to access my REST API. The API is currently available on a different domain and has CORS setup to allow cross domain requests from my client. To access the API securely I pass an Authorization header with an access token. The token has a short life and when it expires I can make a request for a new one using a refresh token. When an access token has expired the server will respond with a 401 error to let me know the request was Unauthorised.
Problem
I am trying to catch the 401 Unauthorised request with superagent, then handle the token refresh. The problem is superagent is not returning a standard response or error for the 401. I get a string response instead of an object.
Error Response
Error: Request has been terminated
Possible causes: the network is offline, Origin is not allowed by Access-Control-Allow-Origin, the page is being unloaded, etc.
at Request.crossDomainError (client.js:616)
at XMLHttpRequest.xhr.onreadystatechange (client.js:724)
Call
ajax.get(api.baseURL + '/some_request)
.accept('application/json')
.set('Content-Type', 'application/json')
.set('Authorization', 'Bearer ' + this.getAccessToken())
.send({...})
.then((sucess) => {
//handle success, update data
})
.catch((error) => {
//handle error, if 401 refresh the token and try again.
});
Additional Information
The server is successfully handling the CORS side of things, the initial OPTIONS request is returning successfully with a 200.
I have tried using the non ES6 .end((error, response) => {...} method to handle responses with the same result.
I'm using superagent version "3.4.0"
I have tried catching the error event, get the same error string.
.on('response', (error, response) => {
//manage error
})
.on('error', function(err) {
//manage error
})
My server 401 response has a json response body, and returns a Content-Type:application/json; charset=UTF-8 header
{
"name":"Unauthorized",
"message":"You are requesting with an invalid credential.",
"code":0,
"status":401,
"type":"yii\\web\\UnauthorizedHttpException"
}
Question
What do I need to do to get access to the error object for a 401 response? I want to be able to check the error.status to see if its a 401 so I can refresh the token?
Meteor.http.call( 'GET', 'http://google.com', {}, function( error, response ) {
if ( error ) {
console.log( error );
} else {
console.log( response );
}
});
the problem is it keeps showing this error this is my first time using this package so am not sure if i really understand it.
this is the error on my console.
XMLHttpRequest cannot load http://google.com. No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:3000' is therefore not allowed
access.
HTTP Requests from the browser will always run into this CORS issue unless you specifically allow them with CORS headers.
Meteor has a good way of dealing with it. First up you do a call:
Meteor.call("httpRequest","http://myserver.com/path/to/file",params);
In the server you write a Meteor method like this
Meteor.methods({
httpRequest: function(url,params) {
// Send the http request here
})
});
You cannot do a call back to the client with the result of the http request, but you can put it into a database record, which the client subscribes to.