firebase functions cors error

cors..
웹 개발을 하면서 얼마나 짜증나게 하는지 모른다.
프로젝트마다 심심하면 찾아오는 이 문제로 인해 해결하느라 업무 시간을 반토막을 내버린다.

가장 큰 문제는 local에서는 아주 잘되고 있다가 firebase 서버에 올리면 안된다는 것이다.

실컷 준비한 프리젠테이션을 usb에 담아서 발표장에 갔는데 usb가 먹통된 그런 느낌이다.

그래서 이번에는 정리를 통해서 동일한 상황시 바로 해결을 하고자 한다.

cors를 검색하면 정말 무수히 많은 내용들이 나온다.
하지만 개발자는 바쁘다.
이론이 안중요 한것은 아니지만 현실적으로 지금 당장 실행하는 것이 우선이다.

1. cors 설치

npm i cors

2. dependencies 등록됨

 "dependencies": {
    "axios": "^0.27.2",
    "cors": "^2.8.5",
    "firebase-admin": "^10.0.2",
    "firebase-functions": "^3.18.0"
  },

3. require 등록

const cors = require('cors')({
  origin: ['http://localhost:8080', '도메인'],
  credentials: true
});

4. 사용

exports.함수명 = functions.region('asia-northeast3').https.onRequest(async (request, response) => {
  cors(request, response, async () => {
    //이 안에서 request, response 를 가져와서 사용
  });
});

5. 결정타 - firebase.json에 header 추가하기

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "headers": [ {
      "source" : "**",
      "headers" : [ {
        "key" : "Access-Control-Allow-Origin",
        "value" : "*"
      }]
    }]
  }
}

이러면 아주 잘됨.
-끝-