HTTPS with $ http in Angular not working

Question

I am creating a Facebook tab using Angular. I am making a $ http request to a PHP page in the same domain. The request is as follows:

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

The application is served by HTTPS, but when I try to run the application on the Facebook tab, I get the following mixed content error:

Mixed content: a page with ' https://example.com ' was loaded by HTTPS, but requested an unsafe script ' http://example.com/api/?action=saveResult&points=2&callback=angular.callbacks._0 '. This request is blocked; content must be transmitted via HTTPS.

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

Answer 1

The way I finally decided was to specify the url directly in the php file.

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

It’s still not clear to me why the first method didn’t work.

Answer 2

For some reason, Angular will send all requests via HTTP unless you have a lead / at the end of your requests. Even if the page itself is served via HTTPS.

For instance:

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

But if you add a lead / everything will work as expected:

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

PS You did not solve it by adding index.php to the end. You solved this by adding / before index.php; -)

EDIT: The main reason for this problem is that Angular is viewing the actual headers from the server. If you have the wrong internal http data pass through https, there will still be http headers, and Angular will use them unless you add / at the end. those. if you have NGINX serving content via https but sending requests to Gunicorn to the backend via http, you may have this problem. The way to fix this is to pass the correct headers to Gunicorn, so your structure will be impressed by the service via https. In NGINX, you can do this with the following line:

proxy_set_header X-Forwarded-Proto $ Schema;