firebase cloud functions 설치, 설정 with typescript | cors

여러번 설치 했었음에도 같은 실수를 반복하는거 같으니 메모.

 

 

1. firebase-tools 설치 후 터미널에서 폴더 하나를 만들어 들어간 후 아래 명렁어 입력.

firebase init functions

 

 

2. project 선택 후 Typescript 선택

3.  ESLint는 생략을 추천한다. (no)

(이게 많은 번거로움과 문제들을 일으키곤 하니, 필요하다면 나중에 설정하도록 하자.)

ESLint no!

npm으로 패키지들 설치 후 완료

 

4. 실행하면 로컬에서 테스트 할 수 있는 http 주소를 준다. 이를 브라우저 주소창에 입력 후 접속해본다.

cd functions && npm run serve

http://localhost:5001/프로젝트이름/지역/helloWorld

브라우저 주소창에 입력 후 접속 화면

 

5. server-side에서 요청시는 문제가 없지만, client-side에서 요청시 cors 에러가 나므로 cors를 추가해준다.

cors error

import * as functions from "firebase-functions";
import * as cors from 'cors'

const corsHandler = cors({ origin: true });

export const helloWorld = functions.https.onRequest((request, response) => {
  corsHandler(request, response, () => {
    functions.logger.info("Hello logs!", {structuredData: true});
    response.send("Hello from Firebase!");
  });
});

 

 

관련 게시물

2022.08.11 - [프로그래밍/버그(bug)] - cloud functions express cors error with typescript | 오류, 에러, 버그

cloud functions express cors error with typescript | 오류, 에러, 버그

 

참고 자료

Enabling CORS in Cloud Functions for Firebase

 

 

질문이나 오류 발견 환영입니다.