Usé mi código de back-end para generar la URL prefirmada y luego usé esa URL para cargar un video que se grabó durante la sesión. Estoy usando el siguiente código en la interfaz (React JS) para cargar el video, la verificación previa parece fallar con 403 Prohibido y la solicitud de publicación falla con un error cors. A continuación encontrará los detalles:
Código utilizado:
static async uploadVideoToS3(url, body) { try { const myHeaders = new Headers({ 'Content-Type': 'video/mp4', 'mode': 'no-cors' }); const response = fetch(url, { method: 'POST', headers: myHeaders, body: body }); return response; } catch (error) { toast(error); console.log(error); } }Error de consola: el acceso a buscar en 'https://xxxxxxxxxx' desde el origen 'http://localhost:5000' ha sido bloqueado por la política de CORS: la respuesta a la solicitud de verificación previa no pasa la verificación de control de acceso: No 'Access-Control- El encabezado Allow-Origin' está presente en el recurso solicitado. Si una respuesta opaca satisface sus necesidades, establezca el modo de la solicitud en 'no-cors' para obtener el recurso con CORS deshabilitado.
Nota : Cambió la URL prefirmada a xxxxxxxxxx para evitar filtrar los detalles en la publicación aquí.
¿Podría ser el problema que estoy ejecutando todo esto en localhost? ¿O la configuración de CORS en el depósito de AWS S3 está causando este problema? o ¿Falta algún encabezado en mi solicitud?
Encontré una publicación que tenía un problema similar: Obtener 403 (Prohibido) al cargar a S3 con una URL firmada donde el OP respondió que el problema se resolvió pero nunca mencionaron la resolución.
Intente agregar proxy al archivo package.json y agregue la url del servidor al que está enviando su solicitud, en su caso localhost:5000
"proxy": "http://localhost:5000"
Luego reinicie su aplicación con npm start y cambie la url en su component , si lo está haciendo como
const res = fetch('https://localhost:5000/api/user')luego cámbialo y hazlo como abajo
const res = fetch('/api/user')Si la solución anterior no funciona, es posible que haya un problema con su backend.
También lo pensé, ya que estaba tratando de ingresar a la URL local que no se sirve en un host seguro (HTTP) que estaba causando el problema. Así que implementé la aplicación en un entorno de desarrollo pero enfrenté el mismo problema. Después de investigar un poco, pude solucionar el problema. Parece que necesitaba modificar la configuración de CORS del S3 Bucket desde el que intentaba generar la URL prefirmada.
Antes de generar la URL prefirmada, agregué el siguiente fragmento de código que cambia la configuración de CORS del depósito S3 y, dado que también estaba accediendo desde mi local, puse los orígenes permitidos como * por ahora, pero antes de pasar a producción. , lo cambiaré a la URL de producción.
//passing AWS credentials BasicAWSCredentials awsCreds = new BasicAWSCredentials(accessKey, secretKey); AmazonS3 s3Client = AmazonS3ClientBuilder.standard() .withCredentials(new AWSStaticCredentialsProvider(awsCreds)) .withRegion(clientRegion) .build(); //Creating CORS List to update the CORS Configuration List<String> allowedHeaders=new ArrayList<String>(); allowedHeaders.add("*"); List<AllowedMethods> allowedMethods=new ArrayList<AllowedMethods>(); allowedMethods.add(0, AllowedMethods.GET); allowedMethods.add(1, AllowedMethods.PUT); List<String> allowedOrigins=new ArrayList<String>(); allowedOrigins.add("*"); List<String> exposedHeaders=new ArrayList<String>(); exposedHeaders.add("GET"); exposedHeaders.add("PUT"); CORSRule cors = new CORSRule(); cors.setAllowedHeaders(allowedHeaders); cors.setAllowedMethods(allowedMethods); cors.setAllowedOrigins(allowedOrigins); cors.setExposedHeaders(exposedHeaders); cors.setMaxAgeSeconds(3600); //Assigning CORS List to CORS Configuration BucketCrossOriginConfiguration CORSConfiguration = new BucketCrossOriginConfiguration(); CORSConfiguration.withRules(cors); //Updating CORS Configuration s3Client.setBucketCrossOriginConfiguration(bucketName, CORSConfiguration);Como alternativa, también puede modificar el CORS desde la interfaz/otros idiomas, consulte: Javascript: https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#putBucketCors-property Otros idiomas: https: //docs.aws.amazon.com/AmazonS3/latest/API/API_PutBucketCors.html#API_PutBucketCors_SeeTambién