Comments (24)
I guess to have a better idea of why and where it is happening is to put some console logging down the Observable chain (before appending headers).
You might also look into .catch()
observable operators used along the way - maybe somewhere you suppressing an error and so it not visible.
Also if you can provide a plunkr that would be great because I've used this lib in IE11 as well and it was working fine so maybe you have some special use case.
from ng-http-interceptor.
what i have found so far is this:
the script runs that is adding the header in the browser.
Fiddler trace shows that the header is not present.
happens (as far as i can tell) when the code is from localhost / debug or my loading the app from a server.
i have code in app.component constructor that sets up the interceptor
constructor( private route: ActivatedRoute, private router: Router, private authService: AuthService, private menuService: MenuDataService , private http: Http, private httpInterceptor: HttpInterceptorService, ) { httpInterceptor.request().addInterceptor((data, method) => { const headers = getHttpHeadersOrInit(data, method); // Get or create header and set back on
data console.log("AppComponent this.authService ", this.authService ); console.log("AppComponent this.authService.loggedIn ", this.authService.loggedIn ); if( this.authService.loggedIn ){ console.log("AppComponent this.authService ", this.authService ); console.log("AppComponent this.authService.currentUser ", this.authService.currentUser); if( this.authService.currentUser ){ headers.append('Authorization', this.authService.currentUser.token_type + " " + this.authService.currentUser.access_token); console.log("token " , this.authService.currentUser.token_type + " " + this.authService.currentUser.access_token ); } } console.log(method, data); return data; }); }
the console.log calls all look normal in IE 11, no error other than the 401 result.
I will take a second look tomrrow and see if i can get more details.
from ng-http-interceptor.
I may have this figured out, will need to setup a test today and see what happens.
has to do with how chrome and edge do the OPTIONS call.
but IE 11 I do not see that call.
then i got to thinking about old web sites and that i have seen the header "WWW-Authenticate" in the past.
possibly IE 11 is looking for that stuff before it will send the token to the server ??
from ng-http-interceptor.
i added the www-auth header and no change.
i thought that my not sending that header was the problem but it does not seem to make a difference.
from ng-http-interceptor.
Well I can only suggest you to create a plunkr so I can have a look.
from ng-http-interceptor.
will see what i can do, my app has multiple servers and is inside a private network, so a little complicated for me to replicate.
is there a token server that i can test against ?? i will see if i can find one...
from ng-http-interceptor.
Maybe if you have different servers most probably they are on other domain and if so you have to deal with CORS policy where server should tell which headers it allows client to send.
I'm not sure how exactly CORS are implemented in IE11 but it might just remove some headers silently...
from ng-http-interceptor.
that is part of what i suspect is happening..... i am checking for what is going on and making a small test case, i did find an oath test server i may be able to use and test with. will let you know when i have more info.
from ng-http-interceptor.
i am trying to make a working plunk for IE but having some issues.
it works in chrome but hangs in IE due to some missing poly fill or something.
https://plnkr.co/edit/MX7j8Brm0tzQEVKzMCAs
i hard coded a token that works right now and pointed the code to my service.
if you can make this work in IE 11 try any service that needs a token....
from ng-http-interceptor.
ok so i am fail at plunker ....
here is a link:
https://github.com/figuerres/ie11test
angualr cli - current packages.
i can update the token a few times if you want to test with my service....
the project loads and runs in chrome and in IE 11 , but in IE 11 it fails to get the data with a 401 status as the token is never sent to the web service.
almost no code; just trying to add the auth header.
from ng-http-interceptor.
simple jquery works, so something in the angular / typescript seems to be failing.
kind of thought so but just tested to see what happens.
i wonder if there is a change in the angular http that breaks on IE 11 ?
from ng-http-interceptor.
I will have a look to your plukr later. Regarding angular's http library it's unlikely that something is breaking in IE because they are testing angular in saucelabs in IE as well so...
from ng-http-interceptor.
thanks, i am going to try and see if i can figure out any more, i saw that the code to add the header was called in IE in my angular cli project so possibly the proxy ??
or in IE 11 something is not initialized right ??
from ng-http-interceptor.
i did a test of some code and i found this, not much but it might help:
if i use your library to watch the traffic but not modify the headers and i make an http post and add my own RequestOptions object with the header that works.
when i add a header with the ..... i think i found something .....
from ng-http-interceptor.
wow ok this is nuts and now i have to figure out how to bet handle this.....
IE 11 seems to need to have the http request options set or it fails.
this has not been a problem with chrome or with edge!
in my githhub code i added
var options = new RequestOptions({ withCredentials:true });
and then
this.http.post( 'https://devwebservice.adldelivery.com/api/SSRS/ListItemTypes','',options).subscribe(r => this.res = r.text());
and it works!!
i will take a look at your code and see if i can do that in the interceptor setup.... or if some other thing needs to be done.
from ng-http-interceptor.
works in a test case but not in my actual app code.... no idea why that is happening now.
from ng-http-interceptor.
Ah, of course you have to set that flag, because you trying to send authorization headers. According to MDN:
The XMLHttpRequest.withCredentials property is a Boolean that indicates whether or not cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates. Setting withCredentials has no effect on same-site requests.
So it shouldn't had been working even in chrome... A bug?!
Anyway you can set withCredentials flag from the interceptor, you can use some helper function to get Options from data and then set the flag.
from ng-http-interceptor.
you may be right!
i just knew that the app had been working for me with chrome and we have been testing IE 11 to get ready for a limited test release to dogfood some of the work we have so far....
and then i started down this rabbit hole ....
right now the main app is not working and i am going between the test code and the main app code and checking them.
there may be a package having a side effect in the main app code.... more fun to trace down.
from ng-http-interceptor.
Hey I think i have found a very odd bug but i am not 100% sure if this is with the code or with the way IE11 handles javascript data or what.
only in IE11 do i see this happening.
if the http call starts without an Options Arg then the token is not sent to the server even though the code seems to be creating the headers collection and adding them to the options .
if i initialize the http call with an empty request options arg with nothing set then it works like it does in chrome.
something about the data[] array / collection and modifying it going wrong on IE 11
i am looking at your code that gets the options from the array and playing with it to see if i can make it work on IE 11 .
seems odd, possibly some side effect of angualr cli ? i do not know for sure but it is happening and it is related to the options being in the http call before the interceptor gets into it.
from ng-http-interceptor.
ok more details ....
if the http.post . does not have options args set then the
data arguments has a size of 2 with arg 0 and arg 1 but no arg 2 for the options
in IE 11 the line that tried to set the options is setting data[2] but there is not data[2] in the arguments collection and arguments is not a true array and does not support slice/push/pop
on chrome it seems to allow adding an argument on the fly but on in IE 11
so the local variables are there but not added to the actual arguments that get passed back up the chain to the final call to http / ajax.
what i am doing in my code that is working in y test app and i will test this next in my main app
is to do an Array.from(data)
then i can call temp.splice(idx,0,options);
and then
data = temp
now the new options and headers are added and the call works.
so possibly this code:
https://github.com/gund/ng-http-interceptor/blob/master/src/http/helpers/getHttpHeadersOrInit.ts
// Set Options back
data[idx] = options;
should be changed to work that way ??
from ng-http-interceptor.
Interesting finding, I don't remember that I checked the type of the arguments...
They are actually coming from the Proxy here.
Can you try to log the type of arguments in request interceptor in IE?
from ng-http-interceptor.
Alright I just checked in IE and can confirm that Proxy polyfill returns Arguments Object instead of Array.
As a quick fix you can add in your request interceptor next line:
httpInterceptor.request().addInterceptor(data => Array.prototype.slice.call(data));
This will ensure that data is always Array no matter what.
This is only required if you ever going to use Proxy polyfill, so I'm not sure if I will add this piece of code to this library.
It should probably be in polyfill itself...
from ng-http-interceptor.
Crazy little detail for sure, took a bunch of tries to fully get at what was going on. At least now we know and can at least put a note in the docs for anyone who has to support ie. Also I let some folks at Microsoft know so they can also document the issue from the ie quirks side of things.
My boss was glad I was able to get it to work as we have customers still on ie 11 and Windows 7 along with some older pc in our warehouses.
from ng-http-interceptor.
Yes, I just added a note to the readme page with link to this issue.
I also forked polyfill, patched it and submitted PR back so hopefully they will merge it.
Will close this as we sort of resolved it =)
from ng-http-interceptor.
Related Issues (20)
- Get headers on response HOT 1
- Intercept responseError HOT 1
- ng build --prod fails when HttpInterceptorModule imported in app.module HOT 6
- Don't require RxJS version higher than what Angular requires HOT 2
- How to handle http request cancellation in http-interceptor HOT 3
- Interceptor not seeing all headers HOT 5
- (do) function not working in TypeScript 2.3.4 HOT 2
- IE11 Shims/Polyfills issue HOT 10
- Cancelling request type HOT 3
- Interceptors not running HOT 8
- Property 'do' does not exist on type 'Observable<Response>'. HOT 2
- Response interceptor is not called on error HOT 6
- Interceptors can only use in app moudle,could it import once use all moudle HOT 2
- Intercept header parameters at app run HOT 2
- Requests are send twice HOT 1
- Interceptor getting called only in preflight request not in subsequent call HOT 4
- Add support for new HttpClient HOT 5
- Interceptor is making service sending requests twice in lazy loaded module HOT 3
- keep seeing __extends is not defined HOT 2
- I think we should support angular8 HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ng-http-interceptor.