Firebase可调用函数仿真器配置不工作

Question

我正在向现有的Angular/Firebase项目添加可调用函数。我已经使用了我认为是当前的配置标准，但是项目仍然调用生产端点，导致cors异常。

配置:

@NgModule({
declarations: [
AppComponent,
routingComponents,
...
],
imports: [
...
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAuth(() => {
const auth = getAuth();
if (environment.useEmulators) {
connectAuthEmulator(auth, 'http://localhost:5005', { disableWarnings: true });
}
return auth;
}),
-- FUNCTIONS CONFIG CODE --
provideFunctions(() => {
const functions = getFunctions();
if (environment.useEmulators) {
connectFunctionsEmulator(functions, 'localhost', 5001);
}
return functions;
}),
-- FUNCTIONS CONFIG CODE --
provideFirestore(() => {
const firestore = getFirestore();
if (environment.useEmulators) {
connectFirestoreEmulator(firestore, 'localhost', 5006);
}
return firestore;
}),
//provideStorage(() => getStorage()),
provideAnalytics(() => getAnalytics()),
...
],
exports: [],
providers: [...],
bootstrap: [AppComponent]
})

模拟器正在记录日志:

✔functions[us-central1-addMessage2]: http函数初始化(http://127.0.0.1:5001/{project-name}/us-central1/addMessage2)。

angular对端点的调用失败，原因是:

从原点'http://localhost:4200'获取'https://us-central1-{project-name}.cloudfunctions.net/addMessage2'的访问已被CORS策略阻止:对预飞行请求的响应未通过访问控制检查:请求的资源上不存在'Access- control - allow - origin '标头。如果一个不透明的响应满足你的需要，设置请求的模式为'no-cors'来获取CORS禁用的资源。

Answer 1

我的答案分为两部分:

第1部分:通过

getApp ()getFunctions。

-- FUNCTIONS CONFIG CODE --
provideFunctions(() => {
const functions = getFunctions(getApp());  << Notice <<
if (environment.useEmulators) {
connectFunctionsEmulator(functions, 'localhost', 5001);
}
return functions;
}),
-- FUNCTIONS CONFIG CODE --

第2部分:

确保将函数注入到组件中，而不是调用getFunctions。

constructor(private auth: Auth, private firestore: Firestore, 
public dialog: MatDialog, private userService: UserService, 
private func: Functions) {}           << Notice <<

Answer 2

您可以按照本文提供的说明在本地环境中模拟Firebase Cloud功能:

provideFunctions(() => {
const functions = getFunctions(getApp());
if (environment.useEmulators) {
connectFunctionsEmulator(functions, 'localhost', 5001);
}
return functions;
})

在那篇文章中，它提到了如何设置CORS头也像这样:

export const helloWorld = functions.https.onRequest((request, response) => {
response.set('Access-Control-Allow-Origin', '*');
response.send({ message: 'Hello from Firebase emulator!' });
});