ChatGPT와 FCM 개발 - CORS 문제 해결

87.CORS 문제 해결

ChatGPT가 시키는 대로 했을 때 다음과 같은 오류가 발생하였습니다.

Access to fetch at 'https://your-project-id.cloudfunctions.net/sendPushNotification' from origin 'http://localhost:8080' 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.

ChatGPT에게 물었습니다.

Access to fetch at 'https://your-project-id.cloudfunctions.net/sendPushNotification' from origin 'http://localhost:8080' has been blocked by CORS policy:

 

ChatGPT

The error you're encountering is related to Cross-Origin Resource Sharing (CORS). When you try to make a request from a web page hosted at http://localhost:8080 to a different origin (like https://sendpushnotification-m65i6rbula-uc.a.run.app/), the browser blocks the request unless the server explicitly allows it.

 

발생한 오류는 CORS(Cross-Origin Resource Sharing)와 관련이 있습니다. http://localhost:8080에 호스팅된 웹 페이지에서 다른 출처(예: https://your-project-id.cloudfunctions.net/sendPushNotification)로 요청을 시도하면 브라우저는 서버가 명시적으로 허용하지 않는 한 요청을 차단합니다.

How to Fix the CORS Issue

CORS 문제를 해결하는 방법

To fix this issue, you need to enable CORS in your Firebase Function so that it allows requests from different origins.
이 문제를 해결하려면 다양한 출처의 요청을 허용하도록 Firebase 함수에서 CORS를 활성화해야 합니다.

1. Install CORS Package

1. CORS 패키지 설치

First, install the CORS middleware in your Firebase Functions directory:
먼저 Firebase Functions 디렉터리에 CORS 미들웨어를 설치합니다.

npm install cors

2. Use CORS in Your Firebase Function

2. Firebase 함수에서 CORS 사용

Modify your Firebase Function to include CORS headers:
CORS 헤더를 포함하도록 Firebase 함수를 수정합니다.

const functions = require('firebase-functions');
const admin = require('firebase-admin');
const cors = require('cors')({ origin: true }); // Allow all origins

admin.initializeApp();

exports.sendPushNotification = functions.https.onRequest((req, res) => {
  cors(req, res, async () => {
    try {
      // Retrieve the FCM token(s) from Firestore or request body
      const userId = req.body.userId;
      const tokenSnapshot = await admin.firestore().collection('fcmTokens').doc(userId).get();

      if (!tokenSnapshot.exists) {
        return res.status(404).send('FCM Token not found');
      }

      const fcmToken = tokenSnapshot.data().token;

      // Define the message payload
      const message = {
        notification: {
          title: 'New Notification',
          body: 'You have a new message!',
        },
        token: fcmToken,
      };

      // Send the notification
      const response = await admin.messaging().send(message);

      console.log('Successfully sent message:', response);
      return res.status(200).send('Notification sent successfully');
    } catch (error) {
      console.error('Error sending notification:', error);
      return res.status(500).send('Failed to send notification');
    }
  });
});

3. Deploy the Updated Function

3. 업데이트된 기능 배포

After making these changes, deploy your function again:
이렇게 변경한 후 함수를 다시 배포하세요.

firebase deploy --only functions

4. Explanation

4. 설명

• CORS Middleware: The cors middleware allows you to enable CORS for your Firebase Function. The line const cors = require('cors')({ origin: true }); configures the middleware to accept requests from any origin.
  CORS 미들웨어: 'cors' 미들웨어를 사용하면 Firebase 함수에 CORS를 활성화할 수 있습니다. const cors = require('cors')({ Origin: true }); 줄은 모든 출처의 요청을 수락하도록 미들웨어를 구성합니다.
• Handling CORS: The cors(req, res, async () => { ... }) pattern ensures that CORS headers are set correctly before your function logic is executed.
  CORS 처리: cors(req, res, async () => { ... }) 패턴은 함수 논리가 실행되기 전에 CORS 헤더가 올바르게 설정되도록 보장합니다.

5. Testing the Function

5. 기능 테스트

Once deployed, your function should now be able to handle cross-origin requests from your Vue.js application without the CORS policy error.
일단 배포되면 함수는 이제 CORS 정책 오류 없이 Vue.js 애플리케이션의 원본 간 요청을 처리할 수 있습니다.

Final Note 최종 메모

Make sure to test the function from your Vue.js app by triggering it and checking if the CORS error is resolved. If the error persists, ensure that the function is correctly deployed and that there are no other server-side restrictions in place.

Vue.js 앱에서 기능을 트리거하고 CORS 오류가 해결되었는지 확인하여 기능을 테스트하세요. 오류가 지속되면 함수가 올바르게 배포되었는지, 다른 서버 측 제한 사항이 없는지 확인하세요.