本地调试Flutter Web调用非默认区域Firebase函数遇CORS问题

核心原因 #

Firebase可调用函数默认使用us-central1区域，当你将函数部署到自定义区域X时，Flutter SDK若未显式指定目标区域，会默认请求us-central1的端点，导致请求与实际部署的函数域名不匹配，触发CORS错误。以下是无需模拟器的Flutter端配置方案：

方案1：显式配置Functions区域 #

在Firebase初始化代码中，强制指定函数的部署区域，让SDK正确指向目标区域的函数端点：

import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_functions/firebase_functions.dart';

Future<void> initFirebase() async {
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.web, // 替换为你的Firebase Web配置
  );
  // 禁用模拟器（确保使用线上部署的函数）
  FirebaseFunctions.instance.useFunctionsEmulator(origin: null);
  // 指定你的目标区域X，例如'europe-west1'、'asia-southeast1'
  FirebaseFunctions.instance.region('区域X');
}

调用可调用函数时，直接使用配置后的实例即可：

final callable = FirebaseFunctions.instance.httpsCallable('your-function-name');

try {
  final response = await callable.call({'param': 'value'});
  print('函数返回：${response.data}');
} catch (e) {
  print('调用失败：$e');
}

方案2：手动指定函数完整端点（方案1失效时使用） #

如果SDK自动拼接的域名仍有问题，可以直接指定函数的完整URL，确保请求精准指向目标区域的函数：

final callable = FirebaseFunctions.instance
    .region('区域X')
    .httpsCallable(
      'your-function-name',
      options: HttpsCallableOptions(
        uri: Uri.parse('https://区域X-你的项目ID.cloudfunctions.net/your-function-name'),
      ),
    );

替换其中的区域X、你的项目ID、your-function-name为实际值即可。

临时调试辅助：关闭Chrome跨域检查（不推荐生产使用） #

如果上述配置仍有临时问题，可以启动Chrome时关闭跨域安全策略，仅用于本地调试：

# Windows
chrome.exe --disable-web-security --user-data-dir="C:/ChromeDebugSession"

# macOS
open -a Google\ Chrome --args --disable-web-security --user-data-dir="/tmp/ChromeDebugSession"

# Linux
google-chrome --disable-web-security --user-data-dir="/tmp/ChromeDebugSession"

注意：此方法仅为临时调试用，生产环境必须依赖前两种配置方案。

内容的提问来源于stack exchange，提问作者Silverman