Soy nuevo en la configuración de CORS y trato de resolver esto, pero parece que mi configuración es correcta de acuerdo con la documentación. Espero que puedas ayudarme a ver lo que me he perdido. Mi código está tratando de cargar ( PUT ) un archivo directamente al almacenamiento de Google usando una URL firmada.
Acceso a XMLHttpRequest en ' https://storage.googleapis.com/herdboss-dev.appspot.com/uploads/152/152-owner-152-61.jpg?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Go ...' del origen ' https://herdboss-dev.appspot.com ' ha sido bloqueado por la política de CORS: No hay un encabezado 'Access-Control-Allow-Origin' en el recurso solicitado.
Establecí la política de CORS en mi Google Storage Bucket (se agregaron saltos de línea para mejorar la legibilidad):
% gsutil cors get gs://herdboss-dev.appspot.com [{ "maxAgeSeconds": 3600, "method": ["GET", "HEAD", "PUT"], "origin": ["https://herdboss-dev.appspot.com"], "responseHeader": ["X-Requested-With", "Access-Control-Allow-Origin", "Content-Type"] }]Según mi inspector de Chrome, la solicitud previa al vuelo ocurre y devuelve los métodos y encabezados adecuados (hasta donde puedo decir). Además, como nota al margen, noté que PUT aparece en mi inspector de Chrome antes de las OPCIONES, pero las marcas de tiempo muestran que las OPCIONES se envían primero.
Cuando ocurre la llamada OPTIONS , Google Storage responde correctamente y dice que puede admitir mis métodos de solicitud GET, HEAD, PUT y origen https://herdboss-dev.appspot.com :
LA SOLICITUD DE VENTA
Sin embargo, cuando ocurre PUT , Google Storage no responde con el encabezado Access-Control-Allow-Origin adecuado:
¿Qué me estoy perdiendo o haciendo mal? Puedo usar estas direcciones URL firmadas para PUT archivos directamente en mi depósito de almacenamiento de Google cuando realizo una llamada http directa, por lo que sé que las direcciones URL firmadas funcionan. Me estoy encontrando con este problema CORS. Es algo nuevo para mí, no lo he tratado antes, pero parece que estoy configurando todas las cosas que debería configurar.
**EDITAR 1:
Intenté configurar mis orígenes permitidos en * solo como una prueba y aún así me rechazaron con el mismo No 'Access-Control-Allow-Origin' header is present on the requested resource. El inspector de Chrome mostró que la respuesta de OPTIONS devolvió mi * para los orígenes permitidos, pero aún así no funcionó y siguió dando el mismo error.
Lo averigué.
Versión corta: el mensaje de error de Chrome sobre CORS fue una pista falsa. Google Storage rechazó la solicitud que se interpretó como una infracción de CORS.
Versión larga:
Noté en el inspector de Chrome que la respuesta a mi solicitud PUT tenía una longitud de contenido de 862 caracteres, pero Chrome no me mostraba ninguna respuesta. Abrí Firefox y probé el proceso de carga nuevamente y falló con los mismos mensajes de error sobre CORS y Access-Control-Allow-Origin . Sin embargo, en el inspector de red de Firefox, ¡pude ver el cuerpo de respuesta sin procesar!
<Error> <Code>SignatureDoesNotMatch</Code> <Message>The request signature we calculated does not match the signature you provided. Check your Google secret key and signing method.</Message> <StringToSign>.....</StringToSign> <CanonicalRequest>PUT /herdboss-dev.appspot.com/uploads/152/152-owner-152-72.png X-Goog-Algorithm=GOOG4-RSA-SHA256&....;X-Goog-SignedHeaders=content-type%3Bhost content-type:image/png host:storage.googleapis.com content-type;host UNSIGNED-PAYLOAD </CanonicalRequest> </Error> Mi teoría es que cuando Chrome y Firefox realizan la verificación CORS previa al vuelo y luego emiten la solicitud PUT y reciben un código de respuesta 403 que responde como si fuera un problema de CORS, aunque el problema no estaba relacionado con CORS y la respuesta previa al vuelo DID en realidad tenía el encabezado Access-Control-Allow-Origin .
A partir de aquí, pude diagnosticar rápidamente el problema comparando mi código de firma de URL con la solicitud. Me di cuenta de que cuando creé la URL de carga firmada, requería un Content-type de application/octet-stream pero cuando javascript en el navegador estaba haciendo la solicitud PUT , estaba configurando el Content-type en image/png . Actualicé mi javascript para forzar el Content-type para que coincida con la application/octet-stream y luego la solicitud tuvo éxito.