Question

我刚刚将我的有角项目上传到git hub页面https://igalachourov.github.io/，现在当我在本地运行它时，http请求就可以了，但是当我通过github页面启动时，它说

“混合内容：位于'xxxxxxxxx'的页面已通过HTTPS加载，但请求了不安全的XMLHttpRequest端点'xxxxxxxxxx'该请求已被阻止；该内容必须通过HTTPS提供。”

我看到一个指南，要求单击带有x的盾牌图标，然后单击“加载不安全的脚本”，它可以正常工作，但对我尝试加入的公司的人力资源团队不利，他们要求我修复它。

有什么建议吗？

Answer 1

对于内部应用程序调用，您可以尝试实现拦截器以确保所有调用均为https：

import { Injectable } from '@angular/core';
import {
  HttpEvent, HttpInterceptor, HttpHandler, HttpRequest
} from '@angular/common/http';

import { Observable } from 'rxjs';

@Injectable()
export class EnsureHttpsInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // clone request and replace 'http://' with 'https://' at the same time
    const secureReq = req.clone({
      url: req.url.replace('http://', 'https://')
    });
    // send the cloned, "secure" request to the next handler.
    return next.handle(secureReq);
  }
}

对于静态文件，您应该避免显式设置http或https，而只需在其上加上双斜杠即可

//domain.com/myimage.png
//domain.com/style.css

如果无法通过https提供静态文件，则可以从github页面禁用sure https选项。

Answer 2

发生此问题的原因是您的站点部署在https URL提供程序中，但是您的代码指向某个http URL。使用index.html url提供程序检查您的应用程序是否包含任何文件（包括http）中的url，并将其替换为https。

部署时还需要考虑一些事项

在GitHub页面存储库设置中，确保已检查 实施HTTPS选项
始终提供您的 --base-href的前缀为https，而不是http。

示例：

ng build --prod --base-href "https://user_name.github.io/test-app/"

您可以在official documentation

中阅读更多内容

使用git hub页面时HTTP请求出现问题

2 个答案: