Ошибка CORS при использовании выгрузки в GCS с локального хоста

Question

Я сталкиваюсь с ошибкой CORS при загрузке файла в подписанный GCS URL с локального хоста с помощью запроса PUT, при установке Content-Type в качестве image/png:

Access to XMLHttpRequest at 'https://storage.googleapis.com/{{BUCKET_NAME}}/folder/image.png?Expires=1542676226&GoogleAccessId=XXXX&Signature=YYYY' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Я удостоверился в том, чтобы установить политику CORS корзины как можно более свободно для целей разработки:

$ gsutil cors get gs://{{BUCKET_NAME}}

[
    {
      "origin": ["*"], // also tried "http://localhost:3000"
      "method": ["*"],
      "responseHeader": ["*"]
    }
]

К сожалению, я не получаю ничего, кроме 403-х.

Answer 1

В моем случае я использую nodejs + "@google-cloud/storage": "^3.0.2"

Ключ version при создании подписанного URL. Версия по умолчанию v2

      const getSignedUrlResponse: GetSignedUrlResponse = await file.getSignedUrl({
        action: 'write',
        expires: Date.now() + 60 * 1000
        // version: 'v4'
      });

Для клиента я использую fetch API, вот фрагмент кода:

fetch(signedUrl, { method: 'PUT', body: file })

Получена ошибка cors 403 в консоли chrome:

PUT https://storage.googleapis.com/ez2on/adminUsers.png?GoogleAccessId=cloud-storage-admin%40shadowsocks-218808.iam.gserviceaccount.com&Expires=1562832855&Signature=cllvUH%2FaOxKHDy4GNPcI1FP1BMqbYir08NYFQtxTJ5lpbWBmHkfUgAFx2xfmHjDrzbaIJJ9L8Jntld0YnVIC%2FTHjo3qQC3YNQtr%2B8Jr%2BnT8QuyhAQXBtWAfyvnEfmidF1z0Lz870IiPcgfR2DXDi6XXS1uTVDpasa71O4nttnMR2rzAaB6Ev9IkoxPvZ49dyxjbOOp2aFAHEE9LehHZNRwaRqBl2JJN7rHHtXol%2B%2B8loEu99D3dqj5Ph12Lh7%2BNREG0NarZKZx0Iagw6hW%2BW5rKOCuGyuablvaqgntHpD2WIs2qLCGtU8B1rLhyd4ds5%2F7lHz2AcAZD09uNz%2BKG%2BUA%3D%3D 403

Доступ к выборке в 'https://storage.googleapis.com/ez2on/adminUsers.png?GoogleAccessId=cloud-storage-admin%40shadowsocks-218808.iam.gserviceaccount.com&Expires=1562832855&Signature=cllvUH%2FaOxKHDy4GNPcI1FP1BMqbYir08NYFQtxTJ5lpbWBmHkfUgAFx2xfmHjDrzbaIJJ9L8Jntld0YnVIC%2FTHjo3qQC3YNQtr%2B8Jr%2BnT8QuyhAQXBtWAfyvnEfmidF1z0Lz870IiPcgfR2DXDi6XXS1uTVDpasa71O4nttnMR2rzAaB6Ev9IkoxPvZ49dyxjbOOp2aFAHEE9LehHZNRwaRqBl2JJN7rHHtXol%2B%2B8loEu99D3dqj5Ph12Lh7%2BNREG0NarZKZx0Iagw6hW%2BW5rKOCuGyuablvaqgntHpD2WIs2qLCGtU8B1rLhyd4ds5%2F7lHz2AcAZD09uNz%2BKG%2BUA%3D%3D' из источника' http://localhost:3000' заблокирован политикой CORS: в запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin». Если непрозрачный ответ отвечает вашим потребностям, установите режим запроса «no-cors», чтобы получить ресурс с отключенным CORS.

После того, как я изменил version с v2 на v4:

      const getSignedUrlResponse: GetSignedUrlResponse = await file.getSignedUrl({
        action: 'write',
        expires: Date.now() + 60 * 1000,
        version: 'v4'
      });

Ошибка исчезла.

Answer 2

Я потратил час на борьбу с этой проблемой и, наконец, понял, что content-type является обязательным и должен соответствовать типу содержимого загружаемого вами файла.

https://cloud.google.com/storage/docs/access-control/signing-urls-manually

После установки правильного типа MIME для файла загрузка прошла успешно.

Я использовал библиотеку, чтобы получить правильный MIME-тип файла: https://www.npmjs.com/package/mime-types