0. Introduction

이 repository는 현재 러닝스푼즈 나노디그리 - django backend 부트캠프에서 팀 프로젝트를 진행하면서 다음과 같은 내용들에 대해 정리하고자 만들었습니다.

  • 팀 정책을 이것으로 정한 이유
  • 개발하면서 부딪힌 문제들에 대한 원인, 해결방안, 해결과정, 그리고 그 이유들

1. S3 CORS issue

web application에서 S3 RDS에 있는 js 파일을 가져올 때 CORS(Cross Origin Resource Sharing) issue가 발생했다.

iamge

위 이미지에 따르면 2가지 사실을 알 수 있다.

  • CORS 정책에 의해 스크립트에 접근하는 게 막혔다는 것
  • ‘Access-Control-Allow-Origin’ header가 http request header에 존재하지 않는다는 것

해결책은 이 header를 추가하는 것이라는 걸 알 수 있다.

그렇다면 CORS란 무엇이고, 이 header는 어떻게 추가할 수 있는 것일까?

 

2. CORS

CORS 란?

‘Cross-Origin Resource Sharing’ 으로 ‘교차 출처 리소스 공유 정책’ 으로 직역할 수 있다. 여기서 교차 출처란 ‘서로 다른 출처’를 의미한다.

그렇다면 origin의 기준 그리고, 서로 다른 지 판단하는 기준은 무엇일까?

Origin이란?

origin = protocol + host + port number

사용자가 사이트에 접속하는 방법은 URL 창에 URL 문자열을 입력하여 접근한다.

URL 구성은 URL 분석 을 보면 ‘프로토콜’ - ‘호스트명’ - ‘Port 번호’ - ‘path’ - ‘query parameter’로 구성된다.

여기서 origin은 ‘Protocol + Host + Port’ 까지 합친 URL을 의미한다.

javascript에서 location.origin이 바로 이 origin을 의미하기 때문에, 쉽게 알아낼 수 있다.

Cross-origin

그렇다면 cross origin이란 이 Protocol + Host + Port 가 합쳐진 것이 서로 다른 출처임을 이해할 수 있다. 즉, 이 3가지 중 하나라도 다르면 출처가 다르다.

Same-origin

반대로 same origin은 이 3가지 모두가 동일한 출처라는 걸 의미한다.

이외의 CORS의 기본 개념들

위 개념들 이외에 same-origin-policy, cross-origin-policy 등등 CORS에 관한 모든 내용이라고 할 정도로 내용이 좋은 블로그 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕를 찾았기 때문에, 이 글에 추가하지 않는다.

 

3. Solution

서버에서 Access-Control-Allow-Origin 헤더에 허용할 출처를 기재해서 클라이언트에 응답하면 되는데, 기재하는 방식은 알아보니 매우 다양했다.

nginx, django, AWS 모두 다 가능했다.

그중에서 AWS 방식을 선택했다.

그 이유는 django의 경우 별도의 패키지를 설치해야 하기 때문이다. nginx는 nginx에서 설정을 해도 django나 AWS에서 그 설정이 제대로 되지 않으면 계속해서 뜨는 걸 이 블로그 Django, Nginx CORS 설정에서 확인했기 때문이다.

AWS S3 > 권한 > CORS 편집

aws - CORS configuration을 참고하여 작성했다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "x-amz-server-side-encryption",
            "x-amz-request-id",
            "x-amz-id-2"
        ],
        "MaxAgeSeconds": 3000
    }
]

위 내용을 추가하니 CORS error가 뜨지 않는다.

위 값들에 대한 설명은 위 aws 문서를 참고한다.

 

Reference