45

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.

HDJEMAI
  • 9,436
  • 46
  • 67
  • 93
Dick Van Ocampo
  • 937
  • 2
  • 8
  • 9

3 Answers3

29

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;

Danil
  • 3,348
  • 2
  • 20
  • 16
  • 2
    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. – Luis Palacios Jul 30 '17 at 00:10
  • in my case was the other way around. With tailing / it would send requests over http. So good to find this answer – Illiax Aug 22 '20 at 22:18
27

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

craigb
  • 16,827
  • 7
  • 51
  • 62
  • 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. – Paulo Scardine Jun 06 '14 at 15:26
  • Are you serving via https on your local setup? What happens? – craigb Jun 09 '14 at 23:10
  • 5
    It just calls using http only, I had to change `'/someUrl'` to `$window.location.origin + '/someUrl'`. – Paulo Scardine Jun 10 '14 at 00:28
  • 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. – Alan Illing Sep 16 '14 at 16:16
  • 11
    Downvoted as my `$http` is indeed making requests using the `http://` protocol instead of `https://` despite the page being served from https. – pztrick Oct 27 '14 at 02:22
  • 1
    @pztrick, Did you ever find a solution? My $http also seems to make requests using http:// rather than https://. – scuba88 Sep 30 '15 at 14:34
9

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.

Cork
  • 722
  • 6
  • 20