Firebase

[Firebase] CORS(Cross-Origin Resource Sharing) and Firebase

Binceline 2017. 11. 8. 03:17



참고 : https://developer.mozilla.org/ko/docs/Web/HTTP/Access_control_CORS

https://firebase.google.com/docs/storage/web/download-files?hl=ko


'Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response'



Firebase에서 위와 같은 오류가 날 때, CORS가 가능하도록 Cloud Storage 설정을 해 주어야 한다.


CORS란? 

 Javascript를 사용하여 통신할 때 Cross-Site Request를 가능하게 해 주는 표준 정책이고, Same-Origin Policy(동일 출처 정책)이라고 한다. 다른 웹 페이지에 접근할 때는 같은 출처의 페이지에만 접근이 가능하도록 하자는 것인데, 같은 출처라는 뜻은 프로토콜 / 호스트명 / 포트가 같다는 것을 뜻한다. 

 Firebase로 치면 Database/ Storage 등 각각 다른 서버들과 통신해야 하는데, ajax 요청 등으로 Storage의 이미지를 다운받아 가공하여 사용하려고 한다거나 할 때 Same-Origin Policy에 의해 막혀 위와 같은 오류 메시지를 보게 된다. 이를 해결하기 위해 CORS라는 것이 등장했다. 자세한 것은 나중에 포스팅할 것이다.


위의 오류 내용에 'Preflight Response'가 언급되는데, CORS 요청 중 Simple Request라는 방식과 Preflight Request(사전 요청)이라는 방식이 있다. 


아래의 3가지 조건을 '모두' 만족하면 Simple Request라고 하고, 그렇지 않으면 Preflight Request로 전송한다.

- GET / HEAD / POST 중 한 가지 타입

- POST일 경우, Content-type이 다음 세 가지 중 하나여야 함

- application/x-www-form-urlencoded

- multipart/form-data

- text/plain

- Custom header 전송하지 않아야 함


위의 3가지 방식에 맞춰 보냈다고 생각했는데 Preflight 메시지가 출력되는 것을 보니, Firebase 내부적으로 custom header를 사용하는 것 같다.


Preflight 방식은 먼저 클라이언트에서 Preflight 요청을 보내고, Server에서 Preflight 응답을 하고, 그 후에 Actual Request를 보내고 서버에서 Actual Response를 보내는 방식의 단계를 거쳐 통신하는 방식이다.


다시, 에러 메시지를 보자. 'Preflight Response'의 Access-Control-Allow-Headers가 Request header의 Access-Control-Allow-Origin 내용을 허가하지 않는다. 는 뜻이므로, 이는 서버 쪽에서 허가해 주어야 한다.


이제 Firebase에서 이를 해결하기 위해서는 'gsutil' 이라는 cmd 툴을 설치하여 사용해야 한다.


gsutil install : https://cloud.google.com/storage/docs/gsutil_install?hl=ko


gsutil 설치 후 위의 설명대로 진행한다. 그럼 다음 화면을 볼 수 있다.(Windows CMD)


다음은 url을 통해 storage의 이미지를 불러와 Blob으로 저장해 데이터를 다루는 기능을 구현하고 성공한 화면이다.



이렇게 해결했다.

반응형