电容器 http 插件以避免飞行前请求

Question

我正在尝试使用电容器 http 插件向云功能发出 post 请求，以避免触发飞行前请求。但是每次都报错Response body is not available to scripts (Reason: CORS Preflight Did Not Succeed)

这是 http.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Http, HttpOptions } from '@capacitor-community/http';
import { from, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class HttpService {

  constructor() { }

  doGet(url) {
    const options: HttpOptions = {
      url
    }
    return from(Http.get(options));
  }

  doPost(url): Observable<any> {
    const options: HttpOptions = {
      url,
      method: 'POST',
      headers: { 'content-type': 'application/json','Authorization': 'Bearer id_token' },
      data: { foo: 'bar', cool: true },
    };

    return from(Http.request(options));
  }
}

还有 home.page.ts

import { Component } from '@angular/core';
import { HttpService } from '../services/http.service';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  data = null;
  constructor(private httpService: HttpService) { }

  nativeCall() {
    this.httpService.doPost('https://xxxxx/cloude_function_name').subscribe((res: any) => {
      console.log(res);
      this.data = res.data.specials;
    });
  }

}

任何帮助将不胜感激。

Answer 1

经过大量研究后，我发现即使使用离子应用程序的 capacitor-community/http 插件，我们也无法在 Web 视图中绕过 CORS。参考 (https://github.com/capacitor-community/http/issues/28#issuecomment-654932498).

我们可以使用 capacitor-community/http 插件在本机应用程序中绕过 CORS，但不能在 Web 视图中绕过。

电容器 http 插件以避免飞行前请求

capacitor http plugin to avoid pre-flight request

capacity

google-cloud-functions

angular