Question

我正在使用Angular构建Facebook标签。我正在对同一域上的PHP页面执行$ http请求。请求如下所示：

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

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

混合内容：＆＃39; https://example.com＆＃39;装满了 HTTPS，但请求一个不安全的脚本＆＃39; http://example.com/api/?action=saveResult&points=2&callback=angular.callbacks._0＆＃39 ;. 此请求已被阻止;内容必须通过HTTPS提供。

我还尝试在$ http方法中使用HTTPS填充完整的URL，但我仍然遇到同样的错误。

Answer 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

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

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

proxy_set_header X-Forwarded-Proto $ scheme;

Answer 2

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

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

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

Angular中带有$ http的HTTPS无法正常工作

2 个答案: