제목: Create React App에서 HTTPS 요청 시 CORS 오류 해결하기
소개
Firebase의 Cloud Functions을 사용하여 웹 애플리케이션을 개발하다가 Create React App에서 HTTPS 요청을 하면 CORS 오류가 발생하는 경우가 있습니다. 이 블로그 포스트는 CORS 오류를 해결하고 CORS 관련 문제 없이 HTTPS 요청을 성공적으로 수행할 수 있는 해결책을 제공합니다.
CORS 오류
Create React App에서 Cloud Function에 액세스하려고 할 때 다음과 유사한 오류 메시지가 표시될 수 있습니다:
Access to fetch at 'https://us-central1-careerhub-a50a2.cloudfunctions.net/createUser'
from origin 'http://localhost:3000' 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.오류 원인 이해하기
해결책에 들어가기 전에, CORS 오류의 원인을 이해해야 합니다. 이 오류는 Cloud Function이 CORS 헤더가 없어서 React 앱에서 액세스를 허용하지 않기 때문에 발생합니다. 이 보안 기능은 명시적으로 허용되지 않은 한 교차 출처 요청을 방지하기 위해 설정되어 있습니다.
해결책: CORS 헤더 설정하기
이 CORS 오류를 해결하기 위해 Firebase Cloud Function에서 CORS 헤더를 구성해야 합니다. 아래 단계를 따르세요:
단계 1: CORS 패키지 설치하기
먼저, CORS 패키지를 설치해야 합니다. 이 패키지를 통해 CORS 헤더를 쉽게 설정할 수 있습니다. 터미널을 열고 다음 명령을 실행하세요:
npm install cors단계 2: Cloud Function에서 CORS 패키지 가져오기
Cloud Function 코드 파일에 다음 줄을 추가하여 CORS 패키지를 가져옵니다:
const cors = require('cors');단계 3: Cloud Function에서 CORS 구성하기
다음으로, 함수에서 CORS를 활성화해야 합니다. Cloud Function 내부에 다음 코드 스니펫을 추가하세요:
exports.createUser = functions.https.onCall((data, context) => {
// cors() 미들웨어를 사용하여 CORS 활성화하기
return cors()(data, context, () => {
// 기존 함수 로직을 여기에 추가하세요.
const email = data.email;
const password = data.password;
admin.auth().createUser({
email: email,
emailVerified: false,
password: password
})
.then((res) => {
return {
response: res
};
})
.catch((err) => {
return { err };
});
});
});단계 4: 업데이트된 Cloud Function 배포하기
CORS를 활성화하기 위해 Cloud Function에 필요한 변경 사항을 했으면, Firebase CLI나 선호하는 배포 방법을 사용하여 업데이트된 함수를 Firebase에 배포하세요.
결론
이 블로그 포스트의 단계를 따라가면 Create React App에서 httpsCallable 요청을 수행할 때 발생하는 CORS 오류를 해결할 수 있습니다. Cloud Function에서 CORS를 활성화하면 필요한 헤더가 추가되어 교차 출처 요청을 허용하고 CORS 관련 문제를 제거할 수 있습니다.
제공된 코드 스니펫들을 특정 사용 사례에 맞게 조정하고, Cloud Function의 CORS 구성 시 항상 보안 최적 사례를 염두에 두세요.
