Search code examples
angularcors

How can you tell Angular to send the Origin header?


I have an Angular application that connects with my server. For internal reasons I want to be able to send the origin domain to the server as it can be accessed from a couple places, for example:

https://domain1.com/app https://domain2.com/app

In order to do that I would like my Angular app to set the Origin header. I have an interceptor and I tried to do something like this:

return next.handle(req.clone({setHeaders: {Origin: environment.origin}}));

However, it throws an error that says Refused to set unsafe header "Origin". I understand why, but how can I tell Angular to include this header and set it to the current domain (or just set it how it normally would)? I don't need it set to anything special, I just need it included.


Solution

  • The Origin header is sent automatically (by the browser) on cross-origin Ajax requests (and on some other cross-origin requests such as those for fonts or involving the crossorigin attribute).

    It isn't sent for same-origin requests, and you can't make it be sent because it is a Forbidden header (so websites can't lie about the Origin to bypass CORS checks).

    Since it is set for cross-origin requests you can treat its absence as a signal that the request is a same origin request. Test for that instead.


    Obviously, if the request does not come from a browser then it typically won't have an Origin header, but you can't depend on that for security as any non-browser source for a request could easily forge the Origin header.