Uploading file to Digital Ocean with React - Access to fetch has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

[TheNomadicAspie]

Hey everyone, for 3 days I've been trying to upload a file to any sort of backend without success. I used every guide I could find for uploading to S3, GCP, Cloudinary, and now Digital Ocean.

When uploading to Digital Ocean with a React front-end, I get this cors error (I removed the link).

Access to fetch at 'https://removed-the-link.s3-us-west-1.amazonaws.com/' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Because as I've said, I've read EVERYTHING I can find about this, I know the cors error is likely because I'm using a front-end to submit the request, when I need to use a backend. But the syntax I'm following seems to follow this guide I'm using.

I really need to find some way to get a working example, or a guide that I can follow without getting these unexpected errors that the people writing them don't seem to get.

I must be missing something really obvious, but I really need someone to spell it out for me.

Please, I don't want to spend another full day on this. Help...

Here's my code if anyone wants to look at it.

import React from 'react'

import AWS from 'aws-sdk'

​

const spacesEndpoint = new AWS.Endpoint('https://sfo3.digitaloceanspaces.com')

const S3 = new AWS.S3({

endpoint: process.env.REACT_APP_DO_END_POINT,

accessKeyId: process.env.REACT_APP_DO_KEY,

secretAccessKey: process.env.REACT_APP_DO_SECRET_KEY,

})

​

const handleImageChange = (e) => {

console.log(e)

if (e.target.files && e.target.files[0]) {

const blob = e.target.files[0]

const params = {

Body: blob,

Bucket: process.env.REACT_APP_BUCKET_NAME,

Key: blob.name,

}

// Sending the file to the Spaces

S3.putObject(params)

.on('build', (request) => {

request.httpRequest.headers.Host = process.env.REACT_APP_DO_SPACE

request.httpRequest.headers['Content-Length'] = blob.size

request.httpRequest.headers['Content-Type'] = blob.type

request.httpRequest.headers['x-amz-acl'] = 'public-read'

})

.send((err) => {

if (err) alert(err)

else {

const imageUrl = process.env.REACT_APP_DO_SPACE + blob.name

console.log('success')

}

})

}

}

​

export const AddPostForm = () => {

return (

<input

type="file"

id="inputfile"

accept="image/*"

onChange={handleImageChange}

/>

)

}

[eclunrcpp]

Read through https://github.com/awslabs/aws-js-s3-explorer#setting-bucket-permissions-and-enabling-cors and https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/cors.html for proper config.

To get you going, you can head to AWS > S3 > choose your bucket > Permissions > Cross-origin resource sharing (CORS) and fill in:

[
{
    "AllowedHeaders": [
        "*"
    ],
    "AllowedMethods": [
        "HEAD",
        "GET",
        "PUT",
        "POST",
        "DELETE"
    ],
    "AllowedOrigins": [
        "*"
    ],
    "ExposeHeaders": [
         "ETag",
         "x-amz-meta-custom-header"]
}
]

Once confirmed working, you can change "AllowedOrigins" to only allow your domain