I have an interceptor for authentication.
I want to get a header out of the response when I get a 401 response error.
Interceptor is:
function ($httpProvider, fileUploadProvider) {
$httpProvider.interceptors.push(function($q, $localStorage) {
return {
'request': function(config) {
if ($localStorage.token) {
config.headers.Authorization = 'Bearer ' + $localStorage.token;
}
return config;
},
'responseError': function(response) {
if (response.status === 401) {
//$rootScope.$broadcast('unauthorized');
// WWW-Authenticate: Bearer error="invalid_token"
var authResult = response.headers('WWW-Authenticate');
if (authResult.indexOf("invalid_token")>-1) {
$localStorage.token = null;
$timeout(function(){
;
});
}
}
return response;
}
};
I want to get the WWW-Authenticate header from the response.
I can confirm the header is in the response of the web service call by looking at the network tab in Chrome developers tools. If I set a break point in the response handler function and then run console.log(response.headers()) in the console I get:
Object {}
undefined
How do I get to the response headers?
The responseError function receives rejection instead of response.
Therefore if you want to access response headers, what you need is like below.
'responseError': function(rejection) {
if (rejection.status === 401) {
console.log(rejection.config.headers);
}
}
I hope this would help you. :)
Although I know this is not answer and should post as comment, I post it here to use screen capture image.
I tried to get a response header with my test enviroment like below.
nodejs server
res.setHeader('WWW-Authenticate', 'invalid_token');
res.status(401).send();
angularjs
'responseError': function(rejection) {
if (rejection.status === 401) {
console.log(rejection.headers('WWW-Authenticate'));
}
}
Chrome dev tool screen capture
As you can see, I could get the response header correctly.
Therefore I think that there seems to be some problem in your server code where you set a response header.
Would you like to show us your chrome dev tool screen capture and your server code where you set the response header?
Related
I have this api (method get) that is connected to a lambda function that does a simple select from a database, if i test the endpoint with postman with a null body it does work (if i understood, postman is not under the same CORS policy), as well as typing the endpoint on the browser.
But when i try to do a fetch from a simple js, i get the error :
Access to fetch at '...' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
I enabled CORS in API Gateway, both with the Enable CORS option
and with the Enable API Gateway CORS when creating a new resource
If i test my endpoint with gateway, i also get that Allow-content-allow-origin : * is in my response header :
What should i do to fix this problem?
here is the JS fetch :
console.log("pre fetch");
Show();
console.log("post fetch");
function Show(){
fetch("...").then(onResponse);//.then(onJson);
}
function onResponse(response){
console.log(response);
return response.json();
}
I removed the onJson to avoid confusion, but even with that in its the same problem.
Try to include that in your function too, like this,
I hope this would work:
const headers = {'Content-Type':'application/json',
'Access-Control-Allow-Origin':'*',
'Access-Control-Allow-Methods':'POST,PATCH,OPTIONS'}
const response = {
statusCode: 200,
headers:headers,
body: JSON.stringify(X),
};
return response;
Here X is the response that you want to return.
If you are using Node.js you needs to install cors.
npm install cors.
After installing cors, include it in the page where you are using fetch function as shown below;
const cors = require('cors');
app.use(cors());
and the error will be solved.
I made a video on how to fix this.
You need to go into the Lambda function and add special code:
original (does NOT work):
exports.handler = async (event) => {
// TODO implement
const response = {
statusCode: 200,
body: JSON.stringify('Hello from Lambda!'),
};
return response;
};
new one, that works:
exports.handler = async (event) => {
// TODO implement
const response = {
statusCode: 200,
headers: {
"Access-Control-Allow-Headers" : "Content-Type",
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "OPTIONS,POST,GET"
},
body: JSON.stringify('Hello from Lambda!'),
};
return response;
};
You can find this solution in here: https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html
Only you need to replace the:
"Access-Control-Allow-Origin": "https://www.example.com",
with
"Access-Control-Allow-Origin": "*",
Special thanks to user, KnowledgeGainer
ALSO, you need to enable CORS on Gateway API side, just follow instruction from here: https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors-console.html
I have laravel-vue application and one of my functions is running on post request but strange is that I get GET request error:
The GET method is not supported for this route. Supported methods: POST.
code
Route
Route::post('distanceCost', 'Api\Front\CartController#distanceCost');
Component
sendShippingRequest() {
// post request
axios.post('/api/distanceCost/', this.form, {
headers: {
Authorization: 'Bearer ' + localStorage.getItem('access_token')
}
})
.then(response => {
//....
})
.catch((error) => {
console.log('error', error);
});
}
Any idea?
The problem is, that in response to a POST to /api/distanceCost/, Laravel will respond with a redirect to /api/distanceCost. Your browser will then send a request to /api/distanceCost, but this time, it will use GET and it will not send the post payload. This is why your server replies with an error code.
const client = new ApolloClient({
uri,
onError: (e: any) => {
console.log('error: ', e); // Failed to fetch
console.log(e.operation.getContext()); // it does show it has x-abc-id
},
request: operation => {
const headers: { [x: string]: string } = {};
const accessToken = AuthService.getUser()?.accessToken;
const activeClientId = UserService.getActiveClientId();
headers['x-abc-id'] = activeClientId;
if (accessToken) headers['Authorization'] = `Bearer ${accessToken}`;
operation.setContext({ headers });
}
});
The problem here is when i just add Authorization header it makes the POST call and shows the expected error.
But when i add x-abc-id header which is also expected by backend it only makes OPTIONS call (no post call)
P.S. On postman adding both headers works completely fine.
Found what the issue was, thought to share if it help.
Postman does not perform OPTIONS call before sending request to backend.
In OPTIONS call, 👇represents what client call contains: [authorization, content-type, x-abc-id]
BUT what does server expects: 👇
Just authorization, content-type
So it's a calls headers mismatch (nothing related to Apollo).
x-abc-id header explicitly has to be allowed in CORS configuration on backend.
Thanks to Pooria Atarzadeh
I'm using fetch to return a JSON payload to a React SPA. My web server backend is ASP.NET Core 2.0. I recently updated to ASP.NET Core 2.0 and for the life of me can't figure out why IE no longer works with the web application.
The fetch is pretty straight forward.
fetch(getApiPath() + url, {
credentials: 'include'
})
.then(function(response){
if (response.status === 401 && history) {
history.push("/login")
throw new Error('Redirecting to login');
} else if (response.status === 200) {
return response.json();
} else {
throw new Error(response.statusText);
}
})
.then(success)
.catch(function(e) {
console.log(e)
});
The server end is also pretty straight forward.
[Authorize]
[Route("/dashboard")]
public object Index()
{
Log.Debug("Index");
return new { dashboard = _dashboard, authenticated = HttpContext.User.Identity.IsAuthenticated };
}
The problem manifests itself in a "Invalid Character" error in IE. This works fine in Chrome and Firefox. When looking at the response body, the IE response, is in fact an invalid character while in Chrome, it is the JSON payload.
I'm a little unsure where to even start looking into why IE wouldn't receive or parse the HTTP response correctly. Any ideas?
EDIT:
Making a cross-origin request from a Webpack Dev Server running on port 10000 to a local ASP.NET Core app running on 10001. When packaged for deployment, both the React App and the ASP.NET Core App run on 10000.
Headers between the two requests.
IE Request
IE Response
Chrome
Updated the endpoint to return an IActionResult and explicitly returning JSON. Same result. I've also realized it doesn't work in Edge either.
[Authorize]
[Route("/dashboard")]
public IActionResult Index()
{
return Json(
new { dashboard = _dashboard, authenticated = HttpContext.User.Identity.IsAuthenticated }
);
}
Without additional info I suspect the issue is related to ASP.Net's content negotiation and the fact your method return type is object. Don't use object, this is not Java :))
Before anything else, make sure fetch is sending an Accept: application/json header in IE.
I would also recommend for you to change the return type to IActionResult (or JSONResult if you want to force JSON) for your controller methods.
Can anyone please explain in detail that why ajax uses OPTIONS request before POST request while using headers in APIs.
Is there any way to bypass the OPTIONS request, I just want POST request on my server.
Thanks in advance :)
Consider using Axios
https://www.npmjs.com/package/axios
axios.get( url,
{ headers: {"Content-Type": "application/json"} } ).then( res => {
if(res.data.error) {
} else {
doAnything( res.data )
}
}).catch(function (error) {
doAnythingError(error)
});