在 Angular 中使用 $http 的 HTTPS 不工作

Question

我正在使用 Angular 构建 Facebook 选项卡。我正在向同一域中的 PHP 页面发出 $http 请求。请求如下所示：

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

该应用程序使用 HTTPS 提供，但是当我尝试在 Facebook 选项卡中运行该应用程序时，我收到以下混合内容错误：

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.

我也试过将完整的 URL 和 HTTPS 放在 $http 方法中，但我仍然得到同样的错误。

Answer 1

我最终解决的方法是直接将url指向php文件。

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

我仍然很不清楚为什么第一种方法不起作用。

Answer 2

出于某种原因，如果您的请求末尾没有前导 /，Angular 将通过 HTTP 发送所有请求。即使页面本身是通过 HTTPS 提供的。

例如：

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

但是如果你添加一个前导 / 一切都会按预期工作:

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

P.S。你没有通过在最后添加 index.php 来解决它。您通过在 index.php 之前添加 / 来解决它；-)

编辑：此问题的根本原因是 Angular 从服务器查看实际的 headers。如果您通过 https 的 http 数据内部传递不正确，那么如果您不在末尾添加 /，则仍然会有 http headers 和 Angular 将使用它们。即，如果您有一个通过 https 提供内容的 NGINX，但通过 http 将请求传递给后端的 Gunicorn，您可能会遇到这个问题。解决这个问题的方法是将正确的 headers 传递给 Gunicorn，这样您的框架就会给人以通过 https 提供服务的印象。在 NGINX 中，您可以使用以下行执行此操作：

proxy_set_header X-Forwarded-Proto $方案;

在 Angular 中使用 $http 的 HTTPS 不工作

HTTPS with $http in Angular not working

angularjs

facebook

angular-http