전제

Firebase Functions에서는 미리 다음과 같은 함수를 제공합니다.

server.ts

import * as functions from 'firebase-functions';
import { HttpsError } from 'firebase-functions/lib/providers/https';

export const exampleMethod = functions
  .region('asia-northeast1')
  .https.onCall(async (data, context) => {
    // hogehogeが空白でなければ中身をそのまま返し、空白ならエラーを投げる
    if (data.hogehoge !== '') {
        return {
            hogehoge: data.hogehoge
        }
    } else {
        throw new HttpsError('invalid-argument', 'hogehoge is required.')
    }
  });

Firebase Hosting에 배포하는 웹 사이트에서 누구나 사용할 수있는 기능으로 사용할 수 있으며,onCall 를 사용하여 정의하고 있습니다.

이상의 함수를, 클라이언트측에서, 다음과 같이 호출합니다.

client.ts

// firebaseの事前準備のコードは省略

const functions = firebase.app().functions('asia-northeast1');
const exampleMethod = functions.httpsCallable('exampleMethod');

const result = (await exampleMethod({hogehoge: 'さんぷる文字列'})) as any;
console.log(result);

그러면 다음과 같은 오류가 발생했습니다.



오류 메시지

Access to fetch at 'https://asia-northeast1-example.cloudfunctions.net/exampleMethod' from origin 'https://example.firebaseapp.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

모두가 한 번은 경험하는 CORS, Access-Control-Allow-Origin입니다.

그리고 , 나쁜 것이 , localhost로 실행하고 있는 ( Cloud Functions 에뮬레이터 를 사용하고 있다) 때는 , 에러가 나오지 않고 , 정상적으로 실행할 수 있는 것입니다.

흔한 CORS의 원인 (이번에는 다름)

웹상에서 정보를 찾아보면 잘 보이는 원인과 해결책은 다음과 같다.

1. onRequest 사용

Functions 함수를 정의 할 때 onCall 대신 onRequest을 사용하는 경우 제대로 설정하지 않으면 CORS에 걸립니다.

그러나, 이번은 onCall 를 사용하고 있기 때문에 해당하지 않습니다. 라고 할까, 원래 CORS를 생각하지 않아도 된다는 점이, onCall 의 메리트의 하나인 것. . .

참고 : Firebase의 Cloud Functions에서 CORS가 ~라든지 Access-Control-Allow-Origin이 ~라고 말하면

2. 함수 내부에서 오류가 발생했습니다.

로그를 봐도, 특히 에러가 나오고 있는 것처럼 보이지 않았다. 원래 localhost에서는 정상적으로 실행할 수 있다.

3. 맞춤법 오류 영역 지정 실수

이것도 이번에는 해당하지 않고.

해결 방법

Google Cloud Functions 문서에 Managing Access via IAM이 포함되어 있습니다.

As of January 15, 2020, HTTP functions require authentication by default. You can specify whether a function allows unauthenticated invocation at or after deployment.

번역하면,

2020년 1월 15일 이후에 생성된 새 HTTP 함수의 기본값은 인증이 필요합니다. 배포 시 또는 배포 후 함수가 인증되지 않은 호출을 수행할 수 있는지 여부를 지정할 수 있습니다.

그렇습니다. (일본어판의 문서는 갱신이 늦었는지, 날짜가 달랐습니다.)

그래서 다음과 같이 권한을 추가해 보겠습니다.

【1】 Google Cloud Console의 Cloud Functions 페이지 으로 이동

【2】권한을 설정하고 싶은 함수에 체크를 넣는다



【3】화면 우측 상단의 「정보 패널 표시」를 클릭하면, 권한을 설정할 수 있는 패널이 표시되므로, 「ADD MEMBER」를 클릭



【4】새 멤버에 'allUsers'를 추가하고 역할에 'Cloud Functions 시작 소스'를 추가하고 '저장'을 클릭



【5】「ALLOW PUBLIC ACCESS」를 클릭



이상으로 권한이 추가되어 정상적으로 함수를 실행할 수 있게 되었습니다.



참고 : GitHub firebase/functions-samples : Add Cors to callable function #395

호스팅 된 페이지 이외의 함수에 액세스하면 다음과 같은 응답이됩니다.

{"error":{"message":"Bad Request","status":"INVALID_ARGUMENT"}}

(2020/7/31 추기 상기 기재는 잘못이기 때문에, 취소)

비고

보안 문제가 있다면 알려 주시면 감사하겠습니다.