google-app-engine - classes - google storage cors

No hay encabezado ''Access-Control-Allow-Origin'' con carga reanudable

Question

Estamos generando una URL de carga reanudable a través de la API JSON de almacenamiento en la nube desde nuestra aplicación App Engine que se utiliza en dispositivos móviles y en una aplicación web. En la aplicación web, al utilizar XmlHttpRequest para cargar un archivo con la URL de carga reanudable, obtenemos el siguiente error:

XMLHttpRequest no puede cargar https://www.googleapis.com/upload/storage/v1beta2/b/ ... No hay ningún encabezado ''Access-Control-Allow-Origin'' presente en el recurso solicitado. Por lo tanto, el origen " https://ourapp.appspot.com " no está permitido el acceso.

En las herramientas de desarrollo de Chrome, el registro de la red muestra una primera solicitud de OPCIONES con el encabezado de solicitud "Origen" apropiado y el encabezado de respuesta de "Acceso-Control-Permitir-Origen" pero la siguiente solicitud PUT falla como se mencionó.

El xml cors en nuestro cubo se ve así:

<?xml version="1.0" encoding="UTF-8"?>
<CorsConfig>
<Cors>
<Origins>
<Origin>*</Origin>
</Origins>
<Methods>
<Method>PUT</Method>
<Method>GET</Method>
<Method>POST</Method>
<Method>HEAD</Method>
<Method>DELETE</Method>
<Method>OPTIONS</Method>
</Methods>
<ResponseHeaders>
<ResponseHeader>*</ResponseHeader>
</ResponseHeaders>
<MaxAgeSec>1800</MaxAgeSec>
</Cors>
</CorsConfig>

Cualquier sugerencia es bienvenida.

Gracias.

Answer 1

El problema no es con el documento de COR que se muestra arriba. Uno puede cargar archivos con xhr si la solicitud xhr es formdata como se describe aquí: http://www.html5rocks.com/en/tutorials/file/xhr2/#toc-sending . Si la solicitud no es FormData, obtenemos el error ''Access-Control-Allow_Origin''.

Esto funciona para mí:

$("input[type=file]").change(function() {
var formData = new FormData();
formData.append("field, ...);
formData.append("field, ...);
formData.append("file", filesList[0]);
var xhr = new XMLHttpRequest();
xhr.open(''POST'', "https://my-bucket.storage.googleapis.com/", true);
xhr.onload = function(e) {
console.log("File Uploaded!")
};
xhr.send(formData);
}

Vea un ejemplo completo de node.js en funcionamiento aquí: https://github.com/sfarthin/crop-rotate-and-sample-in-browser

Answer 2

El punto final https://www.googleapis.com no permite el Intercambio de recursos entre orígenes (CORS). Eso significa que todos los navegadores evitarán las solicitudes cuando se emitan desde un sitio web que no se ejecuta en el host de origen (www.googleapis.com).

Asegúrese de haber configurado CORS para su cubo, por ejemplo:

<?xml version="1.0" encoding="UTF-8"?>
<CorsConfig>
<Cors>
<Origins>
<Origin>https://ourapp.appspot.com</Origin>
</Origins>
<Methods>
<Method>GET</Method>
<Method>HEAD</Method>
<Method>PUT</Method>
</Methods>
</Cors>
</CorsConfig>

Si aún no funciona, establezca <Origin>*</Origin> , intente con curl e informe del resultado.

Answer 3

Este es un problema conocido con el uso de la carga reanudable con la API JSON. Supongo que el "origen" utilizado para iniciar la carga reanudable y el "origen" utilizado para cargar datos son diferentes en su caso, ¿verdad?

Hay dos partes involucradas en este tema:

1) Cuando se usa el protocolo de carga reanudable, el "origen" de la primera solicitud (iniciar carga) siempre se usa para decidir el encabezado "acceso-control-permitir-origen" en la respuesta, incluso si usa un "origen" diferente para solicitudes posteriores.

2) La configuración de CORS en GCS solo funciona para la API XML. Creo que nuestra documentación podría mejorar algo para aclarar esto, ahora mismo solo se menciona aquí ( https://developers.google.com/storage/docs/cross-origin#Sending-a-Cross-Domain_Request ) si hace clic en el enlace para ver qué URI de solicitud responderán a la configuración de CORS. La API JSON ignora la configuración de CORS y siempre permitirá el acceso de origen cruzado para el "origen" en la solicitud.

Entonces, si usa la carga reanudable con JSON API, solo usará el "origen" de la primera solicitud y establecerá el encabezado "acceder-controlar-permitir-origen" a ese origen. Por lo tanto, si el origen cambia en las solicitudes de carga posteriores, no funcionarán.

Actualmente tiene dos formas de solucionar este problema:

1) Utilice el mismo origen para la primera solicitud y las siguientes.

2) Cambie para usar la API XML y configure la configuración de CORS en <Origin> * </Origin>.

Answer 4

Se encontró con este problema y descubrió que se debía a un encabezado de "origen" faltante en la solicitud POST inicial proveniente de App Engine.

Mi solicitud POST contiene la longitud del contenido (establecido en 0), x-upload-content-type, y el origen y todo está bien.

[1] https://cloud.google.com/storage/docs/json_api/v1/how-tos/upload#resumable

Answer 5

Tuve el mismo problema, y ​​la solución fue agregar un Origin: "https://ourapp.appspot.com" encabezado Origin: "https://ourapp.appspot.com" a la solicitud inicial reanudable.

Sin embargo, algunos librares, por ejemplo sun.net.www.protocol.http.HttpURLConnection no le permiten cambiar el encabezado de Origin debido a la siguiente variable:

restrictedHeaders = new String[]{"Access-Control-Request-Headers", "Access-Control-Request-Method", "Connection", "Content-Length", "Content-Transfer-Encoding", "Host", "Keep-Alive", "Origin", "Trailer", "Transfer-Encoding", "Upgrade", "Via"};

Mi solución fue crear un nuevo HttpRequest con una biblioteca que permita actualizar el encabezado Origin . Utilicé Okhttp en mi caso (como antiguo desarrollador de Android).

OkHttpClient client = new OkHttpClient();
AppIdentityService appIdentityService = credential.getAppIdentityService();
Collection<String> scopes = credential.getScopes();
String accessToken = appIdentityService.getAccessToken(scopes).getAccessToken();
Request request = new Request.Builder()
.url("https://www.googleapis.com/upload/storage/v1/b/" + bucket + "/o?name=" + fileName + "&uploadType=resumable")
.post(RequestBody.create(MediaType.parse(mimeType), new byte[0]))
.addHeader("X-Upload-Content-Type", mimeType)
.addHeader("X-Upload-Content-Length", "" + length)
.addHeader("Origin", "https://ourapp.appspot.com")
.addHeader("Origin", "*")
.addHeader("authorization", "Bearer "+accessToken)
.build();
Response response = client.newCall(request).execute();
return response.header("location");