Firebase 용 Cloud 함수에서 CORS 활성화

현재 Firebase에 새로운 Cloud Functions를 사용하는 방법을 배우고 있으며 AJAX 요청을 통해 작성한 기능에 액세스 할 수 없다는 문제가 있습니다. "No 'Access-Control-Allow-Origin'"오류가 발생합니다. 내가 작성한 함수의 예는 다음과 같습니다.

exports.test = functions.https.onRequest((request, response) => {
  response.status(500).send({test: 'Testing functions'});
})

이 URL에 기능이 있습니다 : https://us-central1-fba-shipper-140ae.cloudfunctions.net/test

Firebase 문서는 함수 내에 CORS 미들웨어를 추가하도록 제안했지만 시도했지만 작동하지 않습니다 : https://firebase.google.com/docs/functions/http-events

이것이 내가 한 방법입니다.

var cors = require('cors');    

exports.test = functions.https.onRequest((request, response) => {
   cors(request, response, () => {
     response.status(500).send({test: 'Testing functions'});
   })
})

내가 뭘 잘못하고 있죠? 이것에 대한 도움을 주셔서 감사합니다.

최신 정보:

Doug Stevenson 의 답변이 도움이되었습니다. ({origin : true})를 추가하면 문제가 해결 되었으며 처음에는 완전히 놓친 부분 으로 변경 response.status(500)해야 response.status(200)했습니다.

CORS 사용을 보여주기 위해 Firebase 팀에서 제공하는 두 가지 샘플 기능 이 있습니다.

• 날짜 형식의 시간 서버
• 인증이 필요한 HTTPS 엔드 포인트

두 번째 샘플은 현재 사용중인 것과 다른 방식으로 작업합니다.

또한 샘플에 표시된대로 다음과 같이 가져 오기를 고려하십시오.

const cors = require('cors')({origin: true});

클라우드 기능에서 CORS를 다음과 같이 설정할 수 있습니다

response.set('Access-Control-Allow-Origin', '*');

cors패키지 를 가져올 필요가 없습니다

Typescript 에서이 작업을 수행하려는 사람은 다음과 같습니다.

import * as cors from 'cors';
const corsHandler = cors({origin: true});

export const exampleFunction= functions.https.onRequest(async (request, response) => {
       corsHandler(request, response, () => {});
       //Your code here
});

Firebase 호스팅을 사용하는 경우 예를 들어 (firebase_hosting_host) / api / myfunction과 같은 URL이 ( firebase_cloudfunctions_host) / doStuff 함수입니다. 이렇게하면 리디렉션이 투명하고 서버 측이므로 cors를 처리 할 필요가 없습니다.

firebase.json의 rewrites 섹션에서이를 설정할 수 있습니다.

"rewrites": [
        { "source": "/api/myFunction", "function": "doStuff" }
]

지금까지 CORS 솔루션이 효과가 없었습니다.

다른 사람이 내가 한 것과 같은 문제에 부딪 쳤는지 확실하지 않지만 찾은 예제와 다른 5 가지 방법으로 CORS를 설정했지만 아무것도 작동하지 않는 것 같습니다. 나는 그것이 실제로 버그인지 확인하기 위해 Plunker와 함께 최소한의 예제를 설정했지만 예제는 아름답게 실행되었습니다. 나는 firebase 기능 로그 (firebase 콘솔에 있음)를 확인하여 그것이 무엇인지 알 수 있는지 확인하기로 결정했습니다. 내 노드 서버 코드에서 몇 가지 오류를했다 , 관련 고르하지 , 그 나는 디버깅 할 때 내 CORS 오류 메시지 나에게 출시 . CORS와 관련이없는 코드 오류가 CORS 오류 응답을 반환하는 이유를 모르겠지만 좋은 시간 동안 잘못된 토끼 구멍을 내 렸습니다 ...

tl; dr-CORS 솔루션이 작동하지 않으면 Firebase 기능 로그를 확인하고 오류를 디버그하십시오.

나는 자신의 질문에 @Andreys 답변에 약간의 추가를했습니다.

cors(req, res, cb)함수 에서 콜백을 호출하지 않아도되므로 콜백에 모든 코드를 포함시키지 않고 함수 상단의 cors 모듈을 호출 할 수 있습니다. 나중에 cors를 구현하려는 경우 훨씬 빠릅니다.

exports.exampleFunction = functions.https.onRequest((request, response) => {
    cors(request, response, () => {});
    return response.send("Hello from Firebase!");
});

오프닝 포스트에서 언급했듯이 cors를 초기화하는 것을 잊지 마십시오.

const cors = require('cors')({origin: true});

도움이 될 수 있습니다. express (custom URL)로 firebase HTTP 클라우드 기능을 만들었습니다.

const express = require('express');
const bodyParser = require('body-parser');
const cors = require("cors");
const app = express();
const main = express();

app.post('/endpoint', (req, res) => {
    // code here
})

app.use(cors({ origin: true }));
main.use(cors({ origin: true }));
main.use('/api/v1', app);
main.use(bodyParser.json());
main.use(bodyParser.urlencoded({ extended: false }));

module.exports.functionName = functions.https.onRequest(main);

다시 쓰기 섹션을 추가했는지 확인하십시오

"rewrites": [
      {
        "source": "/api/v1/**",
        "function": "functionName"
      }
]

나는 그것에 대해 약간의 글을 발표했다.

https://mhaligowski.github.io/blog/2017/03/10/cors-in-cloud-functions.html

일반적으로 Express CORS 패키지를 사용해야 합니다 를 사용해야합니다. GCF / Firebase Functions의 요구 사항을 충족하려면 약간의 해킹이 필요합니다.

희망이 도움이됩니다!

나와 같은 사람들이 있다면 : 자체 클라우드 기능과 동일한 프로젝트에서 클라우드 기능을 호출하려는 경우 firebase sdk를 초기화하고 onCall 메소드를 사용할 수 있습니다. 그것은 당신을 위해 모든 것을 처리합니다 :

exports.newRequest = functions.https.onCall((data, context) => {
    console.log(`This is the received data: ${data}.`);
    return data;
})

이 함수를 다음과 같이 호출하십시오.

// Init the firebase SDK first    
const functions = firebase.functions();
const addMessage = functions.httpsCallable(`newRequest`);

Firebase 문서 : https://firebase.google.com/docs/functions/callable

SDK를 초기화 할 수없는 경우 다른 제안의 핵심 요소는 다음과 같습니다.

• 기본 위치에서 firebase 호스팅 및 호스트를 사용하는 경우 다시 쓰기를 선택하십시오 : https://firebase.google.com/docs/hosting/full-config#rewrites
• 또는 krishnazden처럼 제안 된 CORS를 사용 하십시오 : https://stackoverflow.com/a/53845986/1293220

'cors'라이브러리를 가져 오지 않고 cors를 활성화하는 방법을 찾았습니다. 또한 Typescript크롬 버전 81.0에서 작동 하고 테스트했습니다.

exports.createOrder = functions.https.onRequest((req, res) => {
// browsers like chrome need these headers to be present in response if the api is called from other than its base domain
  res.set("Access-Control-Allow-Origin", "*"); // you can also whitelist a specific domain like "http://127.0.0.1:4000"
  res.set("Access-Control-Allow-Headers", "Content-Type");

  // your code starts here

  //send response
  res.status(200).send();
});

가치가있는 것에 대해 전달할 때 동일한 문제가 발생 app했습니다 onRequest. firebase 함수에 대한 요청 URL의 문제가 슬래시라는 것을 알았습니다. Express가 찾고 '/'있었지만 함수에 후행 슬래시가 없었습니다 [project-id].cloudfunctions.net/[function-name]. CORS 오류는 잘못된 음성입니다. 후행 슬래시를 추가했을 때 예상했던 응답을 받았습니다.

요청에 승인이있을 때만이 방법이 효과적입니다.

exports.hello = functions.https.onRequest((request, response) => {
response.set('Access-Control-Allow-Origin', '*');
response.set('Access-Control-Allow-Credentials', 'true'); // vital
if (request.method === 'OPTIONS') {
    // Send response to OPTIONS requests
    response.set('Access-Control-Allow-Methods', 'GET');
    response.set('Access-Control-Allow-Headers', 'Content-Type');
    response.set('Access-Control-Max-Age', '3600');
    response.status(204).send('');
} else {
    const params = request.body;
    const html = 'some html';
    response.send(html)
} )};

cors 플러그인을 사용하지 않거나 사용할 수없는 경우 setCorsHeaders() 핸들러 함수에서 먼저 함수를 해도 작동합니다.

회신 할 때 respondSuccess / Error 기능도 사용하십시오.

const ALLOWED_ORIGINS = ["http://localhost:9090", "https://sub.example.com", "https://example.com"]


// Set CORS headers for preflight requests
function setCorsHeaders (req, res) {
  var originUrl = "http://localhost:9090"


  if(ALLOWED_ORIGINS.includes(req.headers.origin)){
    originUrl = req.headers.origin
  }

  res.set('Access-Control-Allow-Origin', originUrl);
  res.set('Access-Control-Allow-Credentials', 'true');

  if (req.method === 'OPTIONS') {
    // Send response to OPTIONS requests
    res.set('Access-Control-Allow-Methods', 'GET,POST','PUT','DELETE');
    res.set('Access-Control-Allow-Headers', 'Bearer, Content-Type');
    res.set('Access-Control-Max-Age', '3600');
    res.status(204).send('');
  }
}

function respondError (message, error, code, res) {
  var response = {
    message: message,
    error: error
  }
  res.status(code).end(JSON.stringify(response));
}


function respondSuccess (result, res) {
  var response = {
    message: "OK",
    result: result
  }
  res.status(200).end(JSON.stringify(response));
}

Firebase 앱을 로컬에서 테스트하는 경우 localhost클라우드 대신 함수를 가리켜 야합니다 . 기본적으로, firebase serve또는firebase emulators:start 웹 앱에서 사용할 때 localhost 대신 서버를 가리키는 함수를 가리 킵니다.

firebase init 스크립트 뒤에 html head에 아래 스크립트를 추가하십시오.

 <script>
      firebase.functions().useFunctionsEmulator('http://localhost:5001')
 </script> 

서버에 코드를 배포 할 때이 스 니펫을 제거하십시오.

에 true의해 변경 하는 "*"것은 나를 위해 트릭을 했으므로 다음과 같이 보입니다.

const cors = require('cors')({ origin: "*" })

일반적 으로이 응답 헤더가 설정되는 방식 이므로이 방법을 시도했습니다.

'Access-Control-Allow-Origin', '*'

이렇게하면 모든 도메인이 엔드 포인트를 호출 할 수 있으므로 안전하지 않습니다.

또한 https://github.com/expressjs/cors 문서에서 자세한 내용을 읽을 수 있습니다.

Express를 사용하지 않거나 단순히 CORS를 사용하려는 경우. 다음 코드는 해결하는 데 도움이됩니다.

const cors = require('cors')({ origin: true, });   
exports.yourfunction = functions.https.onRequest((request, response) => {  
   return cors(request, response, () => {  
        // *Your code*
    });
});

내 경우에는 오류가 클라우드 함수 호출자 제한 액세스로 인해 발생했습니다. 클라우드 함수 호출자에 모든 사용자를 추가하십시오. 링크를 잡아주세요 . 자세한 내용은 기사 를 참조하십시오

다른 솔루션이 작동하지 않으면 통화 시작시 아래 주소를 추가하여 CORS-리디렉션을 활성화 할 수 있습니다.

https://cors-anywhere.herokuapp.com/

JQuery AJAX 요청이 포함 된 샘플 코드 :

$.ajax({
   url: 'https://cors-anywhere.herokuapp.com/https://fir-agilan.web.app/gmail?mail=asd@gmail.com,
   type: 'GET'
});

내 경험을 추가합니다. CORS 오류가 발생한 이유를 찾으려고 몇 시간을 보냈습니다.

이 것을 어떻게 내 클라우드 기능을 이름을 변경했습니다 (맨 처음 내가 큰 업그레이드 후 시도하고 있었다).

따라서 내 firebase 앱이 잘못된 이름으로 클라우드 함수를 호출했을 때 CORS 오류가 아닌 404 오류가 발생했을 것입니다.

내 Firebase 앱에서 클라우드 기능 이름을 수정하면 문제가 해결되었습니다.

https://firebase.google.com/support/troubleshooter/report/bugs에 대한 버그 보고서를 작성했습니다.