javascript - 如何为特定操作创建 ssl 连接，但仍允许 http 用于所有其他站点操作？

Question

我已经为这个问题研究了大约一周的解决方案，但陷入僵局。我搜索了很多在线资源，但没有找到相关示例。从我在网上看到的，这种操作应该是可以的。然而，我以前没有尝试过这种性质的事情，所以我的方法可能有一些明显的误解/错误。

对于以下系统配置，这种操作模式是否可行？如果是这样，请伸出援助之手。

这里是一些相关的信息。

系统配置:具有许多局部 View 的单页应用程序(有些需要 ssl，大多数不需要)

1. 客户端:使用最新版本的 AngularJS、Bootstrap 和 TypeScript，以及 CSS、HTML5
2. 服务器:使用 IIS 7 和 C# Web API 2.0

谢谢...

单页应用要求:

1. 以智能手机、平板电脑、笔记本电脑和个人电脑的所有主要操作系统为目标。
2. 需要为所有成员(member)注册、登录和一些数据创建操作提供安全通信。
3. 所有与用户无关的下载都需要非安全的 http。这占网站每天总使用量的大约 99%。

背景:

1. 如果我使用 https 运行应用程序，该网站工作正常。
2. 如果我在 Web API Controller 中禁用 RequireHttps 属性，该站点可以正常工作。
3. 我试过启用 CORS 但无济于事。
4. 我不明白为什么 Fiddler 显示 200 返回值，但我的应用显示 404 错误。

fiddler 结果:

到 www.myDomain.com:443 的 HTTP 隧道

HTTPS www.myDomain.com/api/Authentication/Login?memberInfo=df... xs

1. 在使用 IE11、Chrome 和 Safari 的 Fiddler 中，以上两项的结果均为 200。
   • 这些浏览器可以正确访问服务器 Web API。
   • Web API 登录方法返回正确的加密字符串值。
2. Firefox 在 Fiddler for Tunnel 中返​​回 200，但不像其他浏览器那样执行 HTTPS 调用。
3. 在我的应用程序中，当使用 RequireHttps 属性注释时，回调返回 404 错误。

相关代码:

this.http({
method: 'POST',
url: 'https://www.myDomain.com/api/Authentication/' + "Login?memberInfo=" + $scope.base64Service.encode(memberInfo),
}).
success(function (data, status, headers, config) {
  // Success code here.
}).
error(function (data, status) {
  // error code here.
  // data = “” for https with status = 404;
});

public class AuthenticationController : ApiController {
[RequireHttps]
[HttpPost]
public string Login(string memberInfo) {
    // login code here.
    return memberData;
    }
}

public class RequireHttpsAttribute : AuthorizationFilterAttribute {
public override void OnAuthorization(HttpActionContext actionContext) {
    if (actionContext.Request.RequestUri.Scheme != Uri.UriSchemeHttps) {
       actionContext.Response = new HttpResponseMessage(System.Net.HttpStatusCode.Forbidden) {
          ReasonPhrase = "HTTPS Required"
       };
    }
    else {
        base.OnAuthorization(actionContext);
    }
  }
}

CORS 的 web.config 文件条目

编辑、删除第二个域

<httpProtocol>
    <customHeaders>
        <add name="Access-Control-Allow-Origin"
   value="http://myDomain.com" />
    </customHeaders>
</httpProtocol>

编辑:

为 Access-Control-Allow-Origin 使用一个域，为 AngularJS 使用以下代码，我已经能够在所有浏览器中获得安全的隧道连接。我还必须将我的测试服务器的自签名证书添加到 Firefox 的域异常(exception)列表中。这解释了上面提到的我测试的四种浏览器之间的差异。显然，浏览器都不允许该请求，因此出现 404 错误。即使服务器返回了成功的响应，浏览器也没有向我的客户端应用程序提供响应。

smmApp.config(['$httpProvider', function ($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
}
]);

Answer 1

您需要在 Access-Control-Allow-Origin 中指定一个域