已被 CORS 策略阻止 React Fetch Firebase 实时数据库

在使用 React 和 Firebase 实时数据库进行开发时，有时您可能会遇到一个错误，即“已被 CORS 策略阻止”错误。这里提供一些关于如何解决此错误的信息。

什么是 CORS？

CORS（跨域资源共享）是一种 Web 应用程序的安全机制，用于限制来自另一个域的访问。它可以控制从一个域加载的 Web 页面或脚本如何与来自不同域的资源进行交互。

出现“已被 CORS 策略阻止”错误的原因是什么？

当您将 Firebase 实时数据库与 React 应用程序一起使用时，可能会出现“已被 CORS 策略阻止”错误。这是因为您正在尝试从不同的域请求数据。由于安全原因，浏览器不允许跨域请求。因此，您需要进行一些设置来解决此问题。

如何解决“已被 CORS 策略阻止”错误？

一种解决方法是在 Firebase 控制台中启用匿名身份验证。这样，您可以通过 Firebase 实时数据库 API 来访问数据，而无需跨域请求。使用 Firebase 实时数据库 API 的示例代码如下所示：

import firebase from 'firebase/app';
import 'firebase/database';

const firebaseConfig = {
  // Your Firebase configuration
};

firebase.initializeApp(firebaseConfig);

const database = firebase.database();

// Read data from Firebase database
database.ref('path/to/data').once('value')
  .then(snapshot => console.log(snapshot.val()))
  .catch(error => console.log(error));

另一个解决方法是在 Firebase 控制台中启用 CORS。这样，您就可以从不同的域请求数据了。使用 Fetch API 与 Firebase 实时数据库进行数据请求的示例代码如下所示：

const url = 'https://your-project-id.firebaseio.com/path/to/data.json';

fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error));

如果您在使用 React 和 Firebase 实时数据库时遇到“已被 CORS 策略阻止”错误，请尝试这两种方法中的一种来解决问题。这将确保您的应用程序可以从 Firebase 数据库中成功地获取数据。