Question

我目前正在使用MEAN堆栈进行Web开发。我的问题是如何在同一网站上混合/重定向HTTP和HTTP页面？

对于大多数情况，我使用HTTP协议与后端进行通信。对于某些页面，我绝对需要使用HTTP（例如 / shop 路由，我使用的是 iframe 来自其他网站的信息。对于某些页面，我需要从其他API服务提供商HTTP GET。）。似乎我无法通过HTTPs设置来实现这些目标。

在某些情况下，我使用HTTP（例如 / money 路由）等与后端进行通信。显然你需要涉及金钱的HTTPs。

我的后端设置了中间件，因此如果您使用HTTP请求 / money ，则会返回一些错误（当前返回301永久移动..）

但我不知道如何进行前端开发。对于Angular部分，我应该只做一些配置，所以当路由由/ money组成时，我只是在HTTP中重新加载整个页面，我应该明确地确保链接看起来像这样吗？

<a ng-href="https://www.domain.com/#!/money">money page</a>

但这对我来说似乎很难编码。

我的问题是：我在思考正确的方向吗？它可行吗？

谢谢，非常感谢任何想法！

Answer 1

这里有几点需要考虑。

首先，是的，当涉及金钱时，您应该始终使用HTTPS。这里的S代表安全，因此您可以想象这意味着常规HTTP不安全。对于常规HTTP，事物以纯文本形式发送，因此任何能够在此过程中看到请求的人都可以查看和复制其中的内容。因此，如果您正在执行诸如发送财务数据，发送密码/登录请求，发送私人用户数据等操作，则应始终确保使用HTTPS。

您还应该记住，您不应该在HTTPS页面上加载HTTP内容，这会导致浏览器警告不安全的内容，甚至直接阻止请求。

无论如何，关于实际问题。是的，你正在思考。当从HTTP转到HTTPS时，您将不得不对页面进行完全重新加载，但将https硬编码到任何此类链接中并不是一个很好的解决方案。幸运的是，Angular为我们提供了decorators指令，允许我们对其行为进行链接。您可以使用它来装饰ngHref，以便在满足某些条件时在其上添加https。

然而，装饰者并不是那么容易上手，或者至少他们最后一次阅读文档并不是这样，所以这里有一个能够满足你需要的东西并且你可以编辑以涵盖更多的案例：

myApp.config(function($provide) {
    $provide.decorator('ngHrefDirective', function($delegate) {
      var original = $delegate[0].compile;
      $delegate[0].compile = function(element, attrs, transclude) {
        if(attrs.ngHref.indexOf('money') !== -1) {
            attrs.ngHref = 'https://example.com/'+attrs.ngHref;
        }
        return original(element, attrs, transclude);
      };
      return $delegate;
    })
});

这将采用任何包含单词money的ng-href指令，并更改输入数据以包含https的完整路径。它会变成这样：

<a ng-href="/money">Link that should be re-written</a>
<a ng-href="/other">Link that should not be re-written</a>

将成为这个：

<a href="https://example.com/money>Money link</a>
<a href="/other">Link that should not be re-written</a>

使用条件HTTP和HTTPs路由进行前端开发

1 个答案: