Question

我们已经在azure上部署了api，并试图在用angular 5编写的Web应用程序中使用它。但是，当我们尝试使用api时，就会遇到错误。

Chrome 混合内容：“ https://somedevapp.azurewebsites.net/#/managesomething”页面已加载   通过HTTPS，但请求了不安全的XMLHttpRequest端点   'http://admindevapp.azurewebsites.net/api/data/getdata'。这个请求   已被阻止；内容必须通过HTTPS提供。

Firefox 阻止加载混合的活动内容

此问题与CORS有关吗？如何解决此问题？

对此有任何帮助！

Answer 1

仅在标题部分添加此内容。

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

Answer 2

如果您的Web应用程序如前所述是通过HTTPs托管的，则它消耗的所有外部资源（CDN，脚本，CSS文件，API调用）也应使用SSL，并通过HTTPs进行保护。想一想。如果您的应用程序反过来向API提出了不安全的请求，那将破坏应用程序安全的目的。

因此，您可以：

按照Chrome的建议，将您的API调用更改为使用HTTP（推荐）
使用HTTP代替HTTPs
将以下meta标签添加到HTML中的<head>元素中：

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

有关此问题的更多信息，请参见：https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/upgrade-insecure-requests。

Answer 3

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

只有当您的资源 API 支持 HTTPS 请求时，您才能使用它。

示例：如果“ip-api.com”没有，“http://ip-api.com/json”和“https://ip-api.com/json”都不会返回相同的响应支持 HTTPS 请求。

Answer 4

使用此----添加到您的头部我将在我的天气应用程序中尝试此操作，现在一切正常

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

Answer 5

下面的meta标签有助于防止Chrome抱怨HTTP请求。我正在研究一个类项目（一个天气应用程序），并且通过HTTP进行API调用，并在HTTP调用中添加S并没有帮助。由于这是一个项目，所以没有大的问题。 @Medhi Ibrahim在上面分享的meta标签可以解决问题。

<meta> http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

Web API错误-此请求已被阻止；内容必须通过HTTPS提供

5 个答案: