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

Posted 2023-02-27

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

【英文标题】：How to resolve CORS policy issue in Ionic Angular app?

【发布时间】：2020-06-27 20:45:02

【问题描述】：

我正在尝试在我的 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 问题，我安装了 Allow CORS: Access-Control-Allow-Origin chrome 插件。以下是列入白名单的域列表：

http://localhost:8100 chrome.google.com 本地主机 本地主机：8100 localhost:8100/profile cloudFunctionUrl

上面的like函数在localhost:8100/profile上执行。

我遇到了两个问题：

我导航到 localhost:8100/profile 没问题，但是当我执行 like 时，我收到以下错误消息：

从源访问“cloudFunctionUrl”处的 XMLHttpRequest 'http://localhost:8100' 已被 CORS 策略阻止：否 'Access-Control-Allow-Origin' 标头出现在请求的 资源。

如果我转到 Firebase 控制台，并且我打开了 CORS 插件，它会显示 “加载您的项目时出错”

谁能告诉我如何解决这个问题？

我也尝试将以下标头添加到请求中，但仍然出现错误：

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

【问题讨论】：

这能回答你的问题吗？ XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header

【参考方案1】：

您正在尝试从您的 Ionic Angular 应用程序执行 cloudFunctionUrl（云功能）。

我也尝试将以下标头添加到请求中，但错误仍然出现

您必须在云函数中添加石南花，而不是在 Angular 应用程序中。您的 Angular App 将调用该函数，并且您的函数将返回所需的标头，从而允许您的 App 访问来自云函数的数据。

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

您的云功能必须支持来自 Angular 应用程序的 CORS 请求，node.js 示例：

/**
 * 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!');
  
;

Handling CORS requests

【参考方案2】：

文档Handling CORS requests 解释说：

跨域资源共享 (CORS) 是一种让在一个域上运行的应用程序访问来自另一个域的内容的方法，例如，让 yourdomain.com 向 region-project.cloudfunctions.net/yourfunction 发出请求。

在该文档中，您可以获得有关在 Cloud Functions 上使用 CORS 的更多说明。

通常添加以下代码，有助于在 Firebase 上使用 CORS - 根据社区上的这篇帖子 here 表示。

const cors = require('cors')(origin: true);

但是，这可能不足以解决您的问题。出于这个原因，我可以从社区中找到一些有用的案例，即用户在使用 Cloud Functions 和 Angular 时遇到了类似的 CORS 错误。

我建议您在下面查看它们，这样您就可以获得更多信息，了解哪些因素可能会影响您的应用程序以及哪些因素可能会帮助您修复它。

Google Cloud Functions enable CORS? Enable Cors in Firebase Cloud Function Unable to test locally using firebase due to CORS restriction

如果这些信息对您有帮助，请告诉我！