如何从 https 网站获取 http 内容？

Question

当我从安全 url 请求时，我得到 "Http failure response for https://www.google.com: 0 Unknown Error"。

我正在尝试测试我的 ionic/angular 移动应用程序。当我尝试使用 http 请求时，我遇到了 Android 9 的问题，但是 Android 7 工作正常。无论如何，我需要将我的后端设置为 public https 服务器。所以现在我正在测试 https 请求和 none of 7 and 9 Android versions works.

我正在使用 Angular 7 ,

"@ionic/angular": "^4.6.1",
"@ionic-native/core": "^5.0.0",
"rxjs": "~6.5.1"

为了简化我的问题，我做了这些小函数。

在我的 html 文件中，我有以下代码：

myFile.html

  <ion-button
          (click)="onStartTest()"
  >Click me</ion-button>
  <p id="testme"></p>

myFile.page.ts

  onStartTest() {
    this.taskService.onTest().subscribe(result => {
      document.getElementById('testme').innerText = 'result ' + result;
      console.log(result);

    }, error => {
      document.getElementById('testme').innerText = error.message;
      console.log('Problem ', error.message);
    });
  }

myTask.service.ts

  onTest() {
    return this.http.get('https://www.google.com').pipe(
      catchError(err => {
        return throwError(err);
      })
    );
  }

起初我尝试了服务器的 URL 但我将其更改为“https://www.google.com”只是为了验证后端是否正确。

我还有一个 interceptors.ts 文件，我用它来进行身份验证，但是当我执行 onStartTest() 函数时我没有登录，但我会随时分享它。

interceptors.ts

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

@Injectable()
export class TokenInterceptor implements HttpInterceptor {


  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const token = localStorage.getItem('auth_token');
    let newHeaders = req.headers;

    if (token) {
      console.log(token);
      newHeaders = newHeaders.set('Authorization', 'Token ' + token);
      const modified = req.clone({
        headers: newHeaders
      });
      return next.handle(modified);
    } else {
      newHeaders = newHeaders.set('Content-Type', 'application/json');
      const modified = req.clone({
        headers: newHeaders
      });
      return next.handle(modified);
    }
  }
}

我认为这些是解决此问题的必要文件。我还使用 Postman 测试了 google 的 url，以确保我应该获得状态 200

我还知道有一个 "add_header" 指令 (nginx) 在响应代码为 20x 或 30x 时添加 'Allow-access-control-origin'。根据我使用 Postman 的屏幕截图，google 正在响应 200 状态，但我的应用程序仍然出现状态 0 错误。

忽略第一个错误。这是我在应用程序启动时与 http 一起使用的功能。现在我正在测试 https。

我表面上尝试使用离子原生库 HTTP，但我的应用程序完全崩溃了。

我也执行了命令ionic serve --ssl但是还是没有。

我在某处读到，为了安全连接我需要一个证书，但我知道这是服务器的工作。

我尝试从 Vanilla JavaScript 的 Dark Sky 请求并且它工作正常。所以 angular/ionic 端有问题而不是服务器端。

我错过了什么？我真的需要尽快解决这个问题！我想向 https url 发送安全请求并获得适当的响应。

Answer 1

您的主要问题是您正在尝试向不安全的调用 (http) 位置（http://192....../mobile/tasks) 来自安全来源 (https://localhost:8100) 进行 API。

这在您的错误消息中已明确指出，这是不允许的，并且已 answered before

您的第二个问题是，出于测试目的，您正试图从您的网站调用第 3 方 https 资源。这仅在第 3 方资源实现 CORS 时有效，Google 和 api.darksky.net 并非如此。使用 Postman 发送 GET 请求是没有用的，因为 Postman 在显示响应之前不会检查 CORS headers。如果你想使用 Postman 检查 CORS，向这些资源发送 OPTIONS 请求，你会看到没有 CORS headers

Answer 2

所以答案在MDN - CORS

For security reasons, browsers restrict cross-origin HTTP requests initiated from scripts. For example, XMLHttpRequest and the Fetch API follow the same-origin policy. This means that a web application using those APIs can only request resources from the same origin the application was loaded from, unless the response from other origins includes the right CORS headers.

这意味着我使用的后端需要更多配置，因为我使用的是 'same-origin' 策略脚本。我以为我们有它，因为当我们尝试从浏览器的控制台获取请求时它工作正常，但在移动设备上却不行。我们有一个自定义 CORS 配置，但我们将其更改为 django-cors-headers。由于我们切换到 django-cors-headers，我可以正确地从 HTTP 和 HTTPs 请求中获得响应。其他答案和评论对于专注于正确的方向非常有用。

如何从 https 网站获取 http 内容？

How do I get http content from a https website?

android

angular

angular-httpclient

ionic4