presigned URL을 이용 중 CORS 에러가 났다

 

공부한 내용을 정리한 글입니다 
내용에 오류가 있거나 더 좋은 의견이 있다면 댓글로 남겨주세요.
배움에 큰 도움이 됩니다. 🖋

 

 

CORS

---

https://javascript.info/url

 

브라우저는 잠재적인 보안 위협에서 사용자를 보호하기 위해 요청하는 곳과 응답받는 곳의 출처(origin)가 같은 경우에만 데이터 공유를 허용한다. 브라우저는 두 URL의 Protocol, Host, Port(명시했을 경우)가 같다면 그 둘을 동일한 출처로 여긴다. 자세한내용

 

https://www.wallarm.com/what/cross-origin-resource-sharing

 

그러나 웹서비스에서 하는 일이 많아지며 다른 출처와 데이터를 주고받을 일이 많아졌다. 그래서 보안을 위한 몇가지 설정을 하면 다른 출처와의 데이터 교환을 허용하도록 장치를 마련해두었는데, 그것이 CORS(Cross-Origin Resource Sharing)다. 자세한내용

 

Cross-Origin Request Blocked: The Same Origin Policy disallows
reading the remote resource at https://some-url-here. (Reason:
additional information here).

*출처: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors

 

서비스를 개발하다 위 같은 에러를 만났다면, 그것은 다른 출처끼리 자료를 공유하려면 그에 맞는 설정을 해주라는 브라우저의 안내이니 차분히 해결하면 된다. 브라우저는 요청 header의 origin과 응답 header의 access-control-allow-origin이 같다면 같은 출처로 인식한다.

 

 

https://www.wallarm.com/what/cross-origin-resource-sharing

 

나는 presigned URL을 이용해 파일 업로드 기능을 구현하던 도중 cors 에러를 만났다.

presigned URL은 AWS 자원에 대한 접근 권한이 부여된(signed) URL이다. 파일 업로드 시 해당 url을 이용해 서버를 거치지 않고 s3에 빠르게 파일을 업로드할 수 있다. 자세한내용

 

이미지 파일을 업로드 시 사용자가 어떤 파일을 올렸는지 확인 가능하도록 썸네일을 보여주었는데, 파일을 서버에 저장했다가 다시 성공 응답을 기다려 보여주는 방식은 썸네일이 뜨기까지 시간이 오래 걸리기 때문에 presigned URL을 이용했다.

 

---

 

파일이 저장되는 과정

1. 클라이언트가 서버에 파일 업로드 요청을 보낸다.
2. 서버에서 DB와 S3에 각각 파일 정보를 업로드한다.
3. DB, S3에 성공적으로 저장이 완료되면 클라이언트에 200 응답을 보낸다.
4. 서버에서 200 응답이 오면 클라이언트가 방금 업로드한 파일을 표시한다.

presigned URL 을 통해 파일이 저장되는 과정

1. 클라이언트가 서버에 presigned URL생성을 위한 POST 요청을 보낸다.
2.  서버에서 S3로 부터 S3 버킷에 접근가능한 signed URL을 받아와 클라이언트에 응답한다. 이 URL에 일정시간 동안 파일을 업로드할 수 있다.
3. 클라이언트에서 응답받은 presigned URL에 파일을 업로드한다.

 

---

그런데 내가 개발을 하고 있던 'http://localhost:3000'와 'https://s3.ap-northeast-2.amazonaws.com/image'와는 프로토콜, 도메인, 포트번호가 모두 다르다. 출처가 서로 다르면 교차 도메인간 자료 공유를 허용하는 CORS 설정을 하기 전까지는 데이터를 공유할 수 없으므로 CORS 에러가 났다. 

이 문제는 S3 버킷 권한의 CORS 부분에 아래와 같이 허용된 methods와 origins를 추가해 해결할 수 있다. 위에서 언급했듯, 브라우저는 요청 header의 origin과 응답 header의 access-control-allow-origin이 같다면 같은 출처로 인식해 URL이 다르더라도 데이터 공유가 가능하게 되기 때문이다. 자세한내용

 

[
    {
        "AllowedHeaders" : [
            "*"
        ],
        "AllowedMethods" : [
            "PUT"
        ],
        "AllowedOrigins" : [
            "*"
        ],
        "ExposeHeaders": []
    }
]

 

https://velog.io/@evelyn82ny/Issues-caused-by-AWS-S3-and-pre-signed-URL-feat-CORS

 

 

 

 

참고

---

https://developer.mozilla.org/ko/docs/Web/Security/Same-origin_policy

동일 출처 정책 - 웹 보안 | MDN

https://docs.amazonaws.cn/en_us/AmazonS3/latest/userguide/cors-troubleshooting.html

Troubleshooting CORS - Amazon Simple Storage Service

https://aws.amazon.com/ko/blogs/media/deep-dive-into-cors-configs-on-aws-s3-how-to/?nc1=h_ls 

Deep dive into CORS configs on Amazon S3 | Amazon Web Services

https://velog.io/@evelyn82ny/Issues-caused-by-AWS-S3-and-pre-signed-URL-feat-CORS

AWS S3 & Pre-signed Url 사용 후 발생한 문제들 (feat. CORS)

https://heewon26.tistory.com/377

AWS S3 Presigned URL

https://velog.io/@evelyn82ny/Issues-caused-by-AWS-S3-and-pre-signed-URL-feat-CORS

AWS S3 & Pre-signed Url 사용 후 발생한 문제들 (feat. CORS)

https://youtu.be/bW31xiNB8Nc