How can I use HTTPS in AngularJS?

Question

I am using AngularJS, $resource & $http and working with apis, however due to security reason I need to make an HTTPS request (work under the HTTPS protocol).

What's the way to use https in AngularJS.

Thanks for your help.

Solution 1

For some reason Angular would send all requests over HTTP if you don't have a tailing / at the end of your requests. Even if the page itself is served through HTTPS.

For example:

$http.get('/someUrl').success(successCallback);  // Request would go over HTTP even if the page is served via HTTPS

But if you add a leading / everything would work as expected:

$http.get('/someUrl/').success(successCallback);  // This would be sent over HTTPS if the page is served via HTTPS

EDIT: The root cause of this problem is that Angular looks at the actual headers from the server. If you have an incorrect internal pass of http data through https there will still be http headers and Angular would use them if you do not add / at the end. i.e. If you have an NGINX serving content through https, but passing requests to Gunicorn on the backend via http, you might have this issue. The way to fix that is to pass the correct headers to Gunicorn, so your framework would be under the impression of being served via https. In NGINX you can do this with the following line:

proxy_set_header X-Forwarded-Proto $scheme;

Solution 2

Use the $http api as you would normally:

$http.get('/someUrl').success(successCallback);

if your app is being served over HTTPS then any calls you are making are to the same host/port etc so also via HTTPS.

If you use the full URIs for your requests e.g. $http.get('http://foobar.com/somePath') then you will have to change your URIs to use https

Solution 3

I've recently run into similar issues using Angular 1.2.26, but only when interacting through a load-balancer - which may be stripping https-related headers...not sure of cause yet. I've resorted to this:

uri = $location.protocol() + "://" + $location.host() + "/someUrl"

You might want to add $location.port() also if using a non-standard port.

Comments

[Paulo Scardine]

This (using a relative URL) is not enough on my local setup (chrome Version 35.0.1916.114 on linux). Perhaps it is dangerous to assume it holds true for every browser/platform.

[Ben P.]

Are you serving via https on your local setup? What happens?

[Paulo Scardine]

It just calls using http only, I had to change '/someUrl' to $window.location.origin + '/someUrl'.

[Alan Illing]

I have the same problem, also using Chrome / linux. I decided to include the CORS headers in the response to whitelist cross-origin domains instead of modifying all my javascript code.

[pztrick]

Downvoted as my $http is indeed making requests using the http:// protocol instead of https:// despite the page being served from https.

[scuba88]

@pztrick, Did you ever find a solution? My $http also seems to make requests using http:// rather than https://.

[Luis Palacios]

Thanks so much @Danil, it was a chaos with the api calls not working! but your answer set me on the right path and it only took me 5 minutes to resolve the issue.

[Illiax]

in my case was the other way around. With tailing / it would send requests over http. So good to find this answer