Estoy tratando de cargar archivos en S3, pero recibo este error (edité el nombre del depósito). Al colocar un bloque de prueba/captura, puedo ver que el error es "acceso denegado".

 mockServiceWorker.js:130 Uncaught (in promise) TypeError: Failed to fetch at mockServiceWorker.js:130:72 at handleRequest (mockServiceWorker.js:135:7) index.js:1227 POST https://name-of-bucket.s3-us-west-1.amazonaws.com/ net::ERR_ABORTED 400 (Bad Request) localhost/:1 Uncaught (in promise) Response {type: 'cors', url: 'https://name-of-bucket.s3-us-west-1.amazonaws.com/', redirected: false, status: 400, ok: false, …} body: (...) bodyUsed: false headers: Headers [[Prototype]]: Headers ok: false redirected: false status: 400 statusText: "Bad Request" type: "cors" url: "https://name-of-bucket.s3-us-west-1.amazonaws.com/" [[Prototype]]: Response

Este es el código que estoy usando.

 import React, { useRef, useState } from 'react' import { useDispatch } from 'react-redux' import { nanoid } from '@reduxjs/toolkit' import { postAdded } from './PostsSlice' import S3 from 'react-aws-s3' export function AddPostForm() { //Removed const ReactS3Client = new S3(config) ReactS3Client.uploadFile(file, newFileName).then((data) => { console.log(data) if (data.status === 204) { console.log('success') } else { console.log('fail') } }) //Removed rest of code }

Esta es la política CORS que estoy usando para S3. ¿Alguien sabe qué puedo estar haciendo mal? ¿Esto tiene que ver con CORS, o es un problema con S3, o hay un error de sintaxis? Verifiqué que el nombre del depósito es correcto y la región.

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