CODEWITHSUNDEEP
angularjsfacebookangular-http
Filip
Filip

Reputation: 2522

HTTPS with $http in Angular not working

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.

Upvotes: 2

Views: 4668

Answers (2)

Danil
Danil

Reputation: 3568

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;

Upvotes: 1

Filip
Filip

Reputation: 2522

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.

Upvotes: 0

Related Questions