如何解决Ionic Angular应用程序中的CORS策略问题？

Question

我试图在我的Ionic Angular应用程序中执行以下函数，cloudFunctionUrl是我在firebase项目中的一个云函数：

import { HttpClient } from '@angular/common/http';
private http: HttpClient

like(post) {
this.http.post('cloudFunctionUrl', JSON.stringify(body), {
      responseType: 'text'
    }).subscribe((data) => {
      console.log(data);
    }, (error) => {
      console.log(error);
    });
}

为了解决CORS问题，我安装了允许CORS：Access-Control-Allow-Origin chrome插件。以下是白名单域的列表：

null

我遇到了两个问题：

null

有人能告诉我怎么解决这件事吗？

我也尝试将下面的头添加到请求中，但错误仍在出现：

let headers = new HttpHeaders({
      'Access-Control-Allow-Origin': '*'
    });
    this.http.post('cloudFunctionUrl', JSON.stringify(body), {
      headers: headers,
      responseType: 'text'
    }

Answer 1

您正在尝试从Ionic Angular应用程序中执行CloudFunctionURL（云函数）。

我还尝试将下面的头添加到请求中，但错误仍然出现

你必须在你的云功能中添加石楠，而不是在Angular应用中。你的Angular App将调用该函数，你的函数将返回所需的头，允许你的App从云函数访问数据。

let headers = new HttpHeaders({
      'Access-Control-Allow-Origin': '*'
    });

/**
 * HTTP function that supports CORS requests.
 *
 * @param {Object} req Cloud Function request context.
 * @param {Object} res Cloud Function response context.
 */
exports.corsEnabledFunction = (req, res) => {
  // Set CORS headers for preflight requests
  // Allows GETs from any origin with the Content-Type header
  // and caches preflight response for 3600s

  res.set('Access-Control-Allow-Origin', '*');

  if (req.method === 'OPTIONS') {
    // Send response to OPTIONS requests
    res.set('Access-Control-Allow-Methods', 'GET');
    res.set('Access-Control-Allow-Headers', 'Content-Type');
    res.set('Access-Control-Max-Age', '3600');
    res.status(204).send('');
  } else {
    res.send('Hello World!');
  }
};

处理CORS请求