PreSigned URL 부분에서 CORS 에러가 나요

[박강필]

S3Service 클래스의 동작까진 이해하고 잘 동작하는데, 
write.html 페이지에서 임의의 이미지 파일을 선택했을 때 강의 내용처럼 S3 버킷에 저장되질 않아요.

브라우저 콘솔을 확인해 보니 CORS 에러라고 해요.
CORS 에러를 방지하고자 강의 내용에 나온 대로 S3 버킷에서 CORS 관련 설정에 변화를 준 게 없는데 말이에요.

그 외에도 PUT 요청이 실패했다는 메세지와 catch 문이 없어서 put 요청을 받지 못했다고 해서

document.addEventListener('DOMContentLoaded', (event) => {
    document.getElementById('fileInput').addEventListener('change', getURL)
});
async function getURL(event) {
    let file = event.target.files[0];
    if (!file) {
        console.error('No file selected');
        return;
    }
    let name = encodeURIComponent(file.name);
    try {
        let response = await fetch('/presigned-url?filename=' + name);
        if (!response.ok) throw new Error('Failed to get pre-signed URL');
        let url = await response.text();
        let uploadResponse = await fetch(url, {
           method: 'PUT',
           headers: {
               'Content-Type': file.type
           },
           body: file
        });
        if (!uploadResponse.ok) throw new Error('Failed to upload file');
        console.log('File uploaded successfully');
        console.log(uploadResponse.url);
    } catch (error) {
        console.error(error)
    }
}
이렇게 코드를 짜고, 
write.html 페이제에서

<input type="file" id="fileInput">
<script src="/js/imageS3upload.js" defer></script>

이렇게 짜서 동작하게 했어요.

근데도 여전히 CORS 문제가 해결이 안 돼요.
이거 어떻게 하면 되나요?
 

[codingapple]

aws 사이트에서 버킷의 cors 설정 잘해놨나 확인해봅시다

[박강필]

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "DELETE",
            "HEAD"
        ],
        "AllowedOrigins": [
            "http://localhost:8080",
            "*"
        ],
        "ExposeHeaders": [
            "ETag"
        ],
        "MaxAgeSeconds": 3000
    }
]

aws 사이트에 설정한 버킷의 cors 설정이에요

[codingapple]

버킷만들어놓은 리전 서울맞는지 application.properties에도 서울 기재했는지 버킷명도 맞는지 확인해봅시다

[글쓴이]

글