Angular 中带有 $http 的 HTTPS 不起作用答案

【问题标题】：HTTPS with $http in Angular not workingAngular 中带有 $http 的 HTTPS 不起作用
【发布时间】：2015-03-27 13:44:34
【问题描述】：

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

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

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

混合内容：“https://example.com”处的页面已加载完毕 HTTPS，但请求了不安全的脚本 'http://example.com/api/?action=saveResult&points=2&callback=angular.callbacks._0'。此请求已被阻止；内容必须通过 HTTPS 提供。

我也尝试将带有 HTTPS 的完整 URL 放入 $http 方法中，但我仍然遇到同样的错误。

【问题讨论】：

错误信息听起来很清楚：执行上述代码的脚本是从https://example.com 加载的，并从http://example.com 请求数据。浏览器不允许这样做。问题是为什么 $http 使用http://example.com，或者为什么当您从绝对 URL 请求时它不起作用。您可以发布您在执行此操作时遇到的错误：$http: with url: https://example.com/api?action=saveR....？
另见stackoverflow.com/questions/30538209/…

标签： angularjs facebook angular-http

【解决方案1】：

由于某种原因，如果您的请求末尾没有前导 /，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

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

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

proxy_set_header X-Forwarded-Proto $scheme;

【讨论】：

【解决方案2】：

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

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

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

【讨论】：