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 (wor

Answer 1

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.

Answer 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

Answer 3

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;