CORS error : preflight missing Access-Control-Allow-Origin

Question

here

I am trying to upload an Image to digitalOcean spaces via a react app and aws-sdk/client-s3 an error thrown in console says Fetch failed loading: PUT MY-DO-SPACES-URL when incepting in network the error says : cross error preflight Missing Allow Origin Header NB: I can upload an image from react-native app

s3.js file configuration

import { S3 } from "@aws-sdk/client-s3";

const s3 = new S3({
    forcePathStyle: false, 
    endpoint: "https://fra1.digitaloceanspaces.com",
    region: "fra-1",
    credentials: {
        accessKeyId: 'SECRET_KEY',
        secretAccessKey: 'ACCESS_KEY',
    }
});

export {s3};

uploadImage function

const uploadImage=async(file,id)=>{
    // file param from another function: event.target.files[0]
    if(file===null){
      console.log('please select file to upload')
    }
    else{
    const ImageURI = URL.createObjectURL(file)
    const ImageURL = await fetch(ImageURI)
    const ImageData = await ImageURL.blob()
    try{
      const uploadParams = {
        Bucket: 'digital-trader-spaces',
        Key: file.name,
        Body: file
      }
      const data = await s3.send(new PutObjectCommand(uploadParams))
      console.log(data)
    }
    catch(err){
        console.log(err)
      }
    }
  }

I tried to solve the issue from DigitalOcean Spaces Cors configuration

score 0 · Accepted Answer · answered Mar 05 '23 at 14:52

For digitalOcean you should config the cors using s3cmd I found the solution https://stackoverflow.com/a/65523591/12863176 as an update for that answer you should fix the cors.xml file

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

CORS error : preflight missing Access-Control-Allow-Origin

1 Answers1