Angular8 get full of HttpClient response headers - javascript

I'm using HttpClient to request a json file. I want the file can be cached with ETag. But it not works. I think that The If-None-Match not send to the server is the reason. So I want to get The 'ETag' from response headers. But the response header not has the item in Angular, But It's truly in the HTTP response in chrome network tool. All of showing in follow images.
How can I get the ETag from response Header

I think it's similar to this : HttpClient dont return all headers.
You need to setup your backend to return Access-Control-Expose-Headers:ETag.

As the MDN shows the cors hide lots of headers, So I can't get the ETag in angular.
Add Access-Control-Expose-Headers:ETag to response header can solve this issue.

Related

How To Call Medium RSS Feed

Medium has an RSS feed available at https://medium.com/feed/[#username]. I'm trying to fetch all my blog posts using an XMLHTTPRequest. When I test on local, I run into CORs errors. When I turn on CORs Chrome extension, I get a 401 error. Any ideas? Has anyone succeeded in calling Medium RSS?
To get https://medium.com/feed/[#username] content using XHR, you can make the XHR request through a proxy of some kind. For example, trying giving your current XHR code this URL:
https://cors-anywhere.herokuapp.com/https://medium.com/feed/#sideshowbarker
That’ll cause the request to go to https://cors-anywhere.herokuapp.com, a open/public CORS proxy which then sends the request on to https://medium.com/feed/#sideshowbarker.
And when that proxy gets the response, it takes it and adds the Access-Control-Allow-Origin response header to it and then passes that back to your requesting frontend code as the response.
That response with the Access-Control-Allow-Origin response header is what the browser sees, so the error message the browser is showing you now goes away, and the browser allows your frontend JavaScript code to access the response.
Or use the code from https://github.com/Rob--W/cors-anywhere/ or such to set up your own proxy.
The reason you need a proxy is, responses from https://medium.com/feed/[#username] don’t include the Access-Control-Allow-Origin response header, so your browser will refuse to let your frontend JavaScript code access those responses cross-origin.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS has more details.
This is a bug.
Bug has opened. (Dan Abramov approved)

Angular $http Unable to send Content type header

I am getting an absurd error while using angular $http with post method.
While sending $http POST requests, it's not attaching Content-type header and due to which i get an error "Response for preflight has invalid HTTP status code 404".
This is my code-
var obj={
"mobile":"hello",
"password":"asjd"
}
$http({
url: 'http://cbsatwork.com/laundry/api-authentication',
method: 'POST',
data:obj,
headers: {
"Content-Type": "application/json"
}
})
Although if i remove the "data:obj" line from the code, it works and i get usual response from the server.
I have looked into many answers, but could not get anything working for me.
EDIT:
I tried using $.ajax() method from jQuery, and it worked totally fine. no issues. so i do not think that there is any issue with my server.
Response for preflight has invalid HTTP status code 404
This error indicates that most likely there's a CORS problem. A browser sends two requests. The first request is OPTIONS and the other is POST, which you configure in your example. The problem is unlikely to be with the Content-Type header, because this header is sent using POST, not OPTIONS. And it's the OPTIONS request that fails. Check if your server supports OPTIONS request and sends back correct CORS required headers

jquery default caching is not working :(

I have set cache:true in my jquery get service request. But this is not working. When i run the fiddler parallel, everytime my url is being hit rather than response fetched from cache. How do I test my data is fetched from cache. I believe using fiddler is the correct approach to test? Any pointers will be really helpful to me. Also I have noted down in my http headers it always send the below two parameters though I have set as cache:true
Cache-Control:no-cache
Pragma:no-cache
But my http response headers which is comes from server is not having these above two http attributes.
CodePen : http://codepen.io/selvaonline/pen/gpyLRz

jquery json error, when i want to get json from steam market

I have a problem with ajax request to Steam.
I want to get price from steam market.
function jPrice(httpToJson) {
$.getJSON(httpToJson, function(data) {
return data.median_price;
});
}
When I call function
jPrice('http://steamcommunity.com/market/priceoverview/?country=US&currency=1&appid=730&market_hash_name=StatTrak%E2%84%A2%20P250%20%7C%20Steel%20Disruption%20%28Factory%20New%29');
I get an error:
XMLHttpRequest cannot load http://steamcommunity.com/market/priceoverview/?country=US&currency=1&appid=730&market_hash_name=StatTrak%E2%84%A2%20P250%20%7C%20Steel%20Disruption%20%28Factory%20New%29. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://lоcalhоst:63342' is therefore not allowed access.
I try:
Set php header Access-Control-Allow-Origin to *
JSONP
RESULT -> The same thing (error)!
Maybe someone knows a solution to this problem?
You won't be able to get the results in your browser via ajax request made directly against steamcommunity.com, neither by setting the header Access-Control-Allow-Origin to *, nor by sending a JSONP request.
For this to work, steamcommunity.com should either add CORS headers in the response (the error message you're seing means that they are not there), or format the output to be JSON-P. They didn't do either.
This is a browser restriction, do not allow the content from a different origin to be loaded via ajax. What you need to do is introduce a middle-ware, so have your back-end server to make a request against steamcommunity.com and return the same response, and make the ajax call against you're server. This will work, your back-end is sending the request, and as it is not a browser request, the response will land, than your ajax call will be able to get the response as well since it is issued against the same domain

get SENT headers in an XMLHttpRequest

Trying to get the Request headers from the XHR object, but with no luck, is there a hidden method or property of that object that will expose the headers sent by the browser?
I already know how to set custom request headers and view the response headers, I'm looking to get a list of all REQUEST headers sent, ones created by the browser and my custom ones.
I'm using webkit/chrome, don't care about other browsers.
EDIT: I'm not looking to monitor the request, I'm building a web app and I need to list those headers and display them within the app, please don't tell me about fiddler, firebug and chrome tools, that's not what I'm looking for.
There is no method in the XMLHttpRequest API to get the sent request headers. There are methods to get the response headers only, and set request headers.
You'll have to either have the server echo the headers, or use a packet sniffer like Wireshark.
Try using Fiddler Web Debugger.
http://www.fiddler2.com/fiddler2/
You can capture the request that was sent in any browser as well as inspect the request headers, response headers, and even copy a capture sent request and send it out as your own.
Assuming you are using jQuery, and you're looking for anything attached, but maybe not ALL headers sent, this could help. Not sure if it meets your exact needs, (since the browser tends to add its own things), but if you need to grab your own headers first, this works:
$.ajaxSetup({
beforeSend: function (jqXHR, settings) {
if(!(settings.headers && settings.headers.token)) {
//no token header was set, so set the request header
jqXHR.setRequestHeader('token', newtoken);
}
}
})
As the name suggests, sent headers were SENT, (duh)! And the XMLHttpRequest class doesn't store sent headers in RAM or put sent headers in an instance of XMLHttpRequest... which is good for performance.
If you want to get the headers that have been sent, all you need to do is to create a log mechanism.
And since custom request header are created through XMLHttpRequest.prototype.setRequestHeader(), You need to intercept XMLHttpRequest.prototype.setRequestHeader();
var sentHeaders = {}
var originalXMLHttpRequest_setRequestHeader = XMLHttpRequest.prototype.setRequestHeader;
XMLHttpRequest.prototype.setRequestHeader = function(header, value) {
sentHeaders[header] = value;
originalXMLHttpRequest_setRequestHeader.call(this, header, value);
}
That's all. No need for external library nor Wireshark. All done within Javascript;
Just make sure the intercept code above executed before any XMLHttpRequest initialization.
Ps. this code will obviously only intercept the custom header created through setRequestHeader(). The XMLHttpRequest itself will set some default headers which can't be accessed through this method.

Categories