CORS 해결하기

개요

https://github.com/lllilllilllilili/video-intelligence-demo-app 

GitHub - lllilllilllilili/video-intelligence-demo-app: 영상 데이터 분석을 합니다.

이 프로젝트를 Clone받아서 API 테스트 중 자동화 되지 않고 있어서(영상 업로드 > 전처리 > 결과 파일 Web에 렌더링) 자동화를 시키는것을 목표로 프로젝트를 진행했습니다.

문제발생

자동화를 위해 처음 생각한 아키텍처는

동영상 업로드시, 

1) Google Cloud Storage 에 파일을 Upload 하고

2) Upload되면 Trigger시켜서 Cloud Function으로 동영상 분석 API를 활용한 전처리

3) 동영상 분석을 수행하고 난 JSON 결과파일을 Google Cloud Storage에 업로드해서 이를 Web-Server에서 읽어오는것입니다.

그런데, CORS가 발생했습니다. 구글에 검색해 보니,

CORS(Cross-Origin Resource Sharing )는 브라우저가 동일 출처 정책을 지켜서 다른 출처의 리소스 접근을 금지하기 때문에 발생하게 됩니다. 

예를들어서 aaa.github.io 도메인 주소를 사용하지만 웹페이지에서 bbb.github.io라는 API서버로 데이터를 요청해서 화면을 그린다면 웹페이지는 동일 출처 정책을 위반하게 됩니다. 

 

해결방법

서버에서 Access-Control-Allow-Origin 헤더를 포함해서 응답을 브라우저에 보내는 방식으로 CORS에러를 해결할 수 있었습니다. 

1) node.js 서버에서 cors package를 활용하여 cors()를 추가해주었습니다. 

let routes = (app) => {
  router.post("/upload", cors(), controller.upload);
  router.get("/files", cors(), controller.getListFiles);
  router.get("/download", cors(), controller.download);
  app.use(router);
};

 2) Google Cloud Storage Bucket CORS Policy를 설정해주었습니다.

[
    {
        "origin": ["*"],
        "method": ["GET"],
        "maxAgeSeconds": 3600
    }
]