발생한 오류

Access to fetch at 'https://us-central1-twohundred-dcb3e.cloudfunctions.net/createMeetings' from origin 'https://twohundred-dcb3e.web.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

POST https://us-central1-twohundred-dcb3e.cloudfunctions.net/createMeetings net::ERR_FAILED

Error: internal
    at new e (3b338370d3d4d0f079e3.js:2)
    at 3b338370d3d4d0f079e3.js:2
    at t.<anonymous> (3b338370d3d4d0f079e3.js:2)
    at 3b338370d3d4d0f079e3.js:2
    at Object.next (3b338370d3d4d0f079e3.js:2)
    at c (3b338370d3d4d0f079e3.js:2)

했던 일

Nuxt+Vue로 웹 앱을 만들 때 firebase functions를 API로 이용했다.

API

functions/index.js

exports.createMeetings = functions
  .region('asia-northeast1')
  .https.onCall(async (data, context) => {
    // 省略
    } catch (e) {
      console.error(new Error(e));
      return new functions.https.HttpsError('internal', e.message);
    }
  });

클라이언트

store/index.js

async ADD_MEETING_URL({ commit }, { lunch }) {
    const store = firebase.firestore();
    // 正しくない
    // const functions = firebase.functions();
    // 正しい
    const functions = firebase.app().functions('asia-northeast1');
    const response = await functions.httpsCallable('createMeetings')(body);    
    await store
      .collection('Lunches')
      .doc(lunch.id)
      .set(
        {
          startURL,
          joinURL
        },
        { merge: true }
      );
  },

오류 원인

API 측에서는 region을 northeast로 설정했다

그럼에도 불구하고 클라이언트 측에서 functions region을 지정하지 않았습니다.

디폴트의 us-central에 액세스 되어 버려 CORS가 되었다

공식 문서에 제대로 주의 쓰여졌다. . .
htps : // 푹 빠져라. 오, ぇ. 코 m / 드 cs / 훙 c 치온 s / ぉ 카 치온 s? hl = 그럼

착각 포인트

"functions cors"와 빙글빙글 이런 기사가 나온다.
htps : // m / q 루사도 r · ms / 40234 c0b5c5c2315 또는 d

Firebase의 Cloud Functions에는 두 가지 기능이 있습니다.
1. functions.https.onCall
2. functions.https.onRequest
1은 SDK가 준비되어 있는 Android, iOS, Javascript에서 호출되는 타입.
htps : // 푹 빠져라. 오, ぇ. 코 m / 드 cs / 훙 c 치온 s / 캇 ぁ b? hl = 그럼
2는 SDK가없는 경우 범용 WebAPI로 만드는 유형.
htps : // 푹 빠져라. 오, ぇ. 코 m / 드 cs / 훙 c 치온 s / h t pp ゔ ぇ ts? hl = 그럼
타이틀의 CORS가 ~라고 하는 것은 2의 타입으로 작성하고 있어, 응답에 CORS를 위한 헤더가 설정되어 있지 않기 때문.
1을 이용했을 경우, 그 근처의 번거로운 부분은 내부에서 처리해 이용자가 의식하지 않아도 좋은 것 같습니다.

어라, 하지만 자신은 onCall 를 사용하고 있기 때문에 CORS는 되지 않을 것,,?

그런가, 개발 환경에서 localhost로부터 액세스하고 있기 때문인가! 라고 생각해.

if (process.env.NODE_ENV === 'development') {
      functions.useFunctionsEmulator('http://localhost:5001');
    }

API측을 상기와 같이 수정해도 에러에 변화 없음. onCall 는 우수하기 때문에 localhost에서도 CORS는 되지 않을 것

결국 region의 차이를 깨달은 콘솔을 보았을 때

어쨌든 northeast로 설정했지만 오류는 us-central입니다.