Serverless framework & Express & APIGateway로 CORS 지원

CORS(Cross-Origin Resource Sharing) 문제는, 로컬로 개발하고 있을 때 서버로 움직이고 있는 API를 두드려 했을 때에, Chrome등의 웹 브라우저로 에러가 되어 화나게 됩니다.

이 조치를 취하면 로컬에서도 API를 두드릴 수 있으므로,

AWS의 콘솔에서 포치 포치하지 않고, CORS 대응하고 싶었습니다만, 꽤 빠져서 메모.
(실제로는 CloudFront 설정이 필요하기 때문에 0 포치는 무리였습니다 orz)

환경

Serverless framework 1.20.2

Express 측에서 일

serverless.yml 를 다음과 같이 편집합니다.

# serverless.yml
functions:
  app:
    handler:index.handler
    events:
      - http:
          path: /{proxy+}
          method: any
          cors: true

cors 대응하는 것만이라면, true로 지정하는 것뿐입니다만, express-on-serverless 를 사용하고 싶었기 때문에, method의 설정에 고생했습니다.

덧붙여서, express-on-serverless 의 디폴트의 쓰는 방법이라고 하면, 아래와 같이 되어 있어, http: any {proxy+} 를 어떻게든 다른 쓰는 방법으로 쓰면서, cors: true 를 하려고 하면 위와 같이 됩니다.

# serverless.yml
functions:
  app:
    handler:index.handler
    events:
      http: any {proxy+}

CloudFront에서 할 일

만약 API Gateway를 CloudFront를 통하지 않고 이용하고 있다면 이 작업은 필요하지 않습니다.

여기에서만 AWS 콘솔을 만나십시오 ((울음)

API Gateway의 Behavior에서 Origin 헤더만 통과합니다.


이상으로 설정은 종료입니다!

요약

Serverless로 cors 대응한다면, cors: true를 하는 것만

express-on-serverless를 사용한다면, 하나를 고안합시다

CloudFront를 통해 Api Gateway를 사용한다면, Origin 헤더를 통과하세요.

이상입니다. 지금까지 읽어 주셔서 감사합니다.