앙큼한 개발기록

[naver storage] bucket cors 오류 본문

개발/vue & nuxt

[naver storage] bucket cors 오류

angkeum 2023. 8. 16. 22:47

vuejs에서 naver storage를 이용하기위해 'aws-sdk'를 사용하여 이미지를 업로드 하려고 하니 

CORS 오류가 빵빵 터졌다. 

 

처음에 클라이언트에서 bucket의 cors 조건을 변경하려고 시도해 봤으나 실패.

cors는 서버에서 연결해서 바꾸어 주니까 해결 되더라..

왜 그런지는 좀더 찾아보겠음.

 

nodejs에서 naver storage (aws) aws-sdk 를 이용한 cors 조건 (전체) 열기 

'use strict'

const env = process.env.NODE_ENV || 'development'
const storage_url = 'kr.object.ncloudstorage.com'
const region = 'kr-standard'
const AWS = require('aws-sdk')

const endpoint = new AWS.Endpoint(storage_url)
const S3 = new AWS.S3({
    endpoint: endpoint,
    region: region,
    credentials: {
        accessKeyId: "ACCESS_KEY",
        secretAccessKey: "SECRET_KEY"
    }
})

module.exports = {
    init: async () => {
    	// get buckets 
        let { Buckets } = await S3.listBuckets().promise()
        
        // find bucket
        let Bucket = Buckets.find(bucket => bucket.Name === naverKey.bucketName)
        try {
        
            // if bucket is null = create bucket
            if (!Bucket) {
                await S3.createBucket({
                    Bucket: naverKey.bucketName,
                    CreateBucketConfiguration: {}
                }).promise()
            }

	    // set bucket cors
            await S3.putBucketCors({
                Bucket: naverKey.bucketName,
                CORSConfiguration: {
                    CORSRules: [
                        {
                            "AllowedHeaders": [
                                "*"
                            ],
                            "AllowedMethods": [
                                "GET",
                                "PUT",
                                "POST",
                                "DELETE"
                            ],
                            "AllowedOrigins": [
                                "*" // 원하는 (열고싶은) 조건 삽입
                            ],
                            "ExposeHeaders": []
                        }
                    ]
                }
            }).promise()

        } catch (err) {
            return false
        }
    }
}
Comments