HTTPS with $http in Angular not working

Question

I'm building a Facebook Tab using Angular. I'm doing a $http request to a PHP page on the same domain. The request looks like this:

$http({
    method: 'JSONP',
    url: '/api?action=saveResult&points=' + state.points + '&callback=JSON_CALLBACK',
    cache: false
});

The app is served with HTTPS but when I try to run the app in a Facebook tab I get the following mixed content error:

Mixed Content: The page at 'https://example.com' was loaded over HTTPS, but requested an insecure script 'http://example.com/api/?action=saveResult&points=2&callback=angular.callbacks._0'. This request has been blocked; the content must be served over HTTPS.

I have also tried putting the full URL with HTTPS in the $http method, but I still get the same error.

Cockroach

the error message sounds pretty clear: the script that is executing the above code was loaded from https://example.com and requests data from http://example.com. The browser does not allow that. The question is why is $http using the http://example.com, or why does it not work when you request from an absolute URL. Can you post the error you get when you do: $http: with url: https://example.com/api?action=saveR....? – Mab

See also #30538709 – Sher

Answer 1

The way I finally solved it was to point the url directly to the php file.

$http({
    method: 'JSONP',
    url: '/api/index.php?action=saveResult&points=' + state.points + '&callback=JSON_CALLBACK',
    cache: false
});

It's still very unclear to me why the first way didn't work.

Cockroach

Answer 2

For some reason Angular would send all requests over HTTP if you don't have a leading / 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

P.S. You didn't solve it by adding index.php at the end. You solved it by adding / before index.php ;-)

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;

Mayer