Как установить CORS общедоступных хранилищ Google Cloud Storage, чтобы избежать ошибок при использовании функции извлечения javascript? - PullRequest
2 голосов
/ 16 октября 2019

Когда я запустил следующие коды для извлечения данных (в формате .json), хранящихся в моем общедоступном хранилище GCS, что-то пошло не так.

async function getData() {
  const carsDataReq = await fetch(...);
  const carsData = await carsDataReq.json();  
  const cleaned = carsData.map(car => ({
    mpg: car.Miles_per_Gallon,
    horsepower: car.Horsepower,
  }))
  .filter(car => (car.mpg != null && car.horsepower != null));
  console.log(cleaned);
  return cleaned;
}

Сообщение об ошибке выглядит следующим образом:

Access to fetch at '...' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Я попытался установить CORS корзины с помощью следующего файла .json:

[                                                                                                                     
    {
      "origin": ["*"],
      "responseHeader": ["Content-Type"],
      "method": ["GET", "HEAD", "DELETE"],
      "maxAgeSeconds": 86400
    }
 ]

, но ошибка все равно обнаружилась. Как это исправить?

1 Ответ

2 голосов
/ 18 октября 2019

Публикация моего комментария в качестве ответа для просмотра другим пользователям.

ОШИБКА

Доступ к выборке в '...' из источника 'null 'был заблокирован политикой CORS: в запрошенном ресурсе отсутствует заголовок' Access-Control-Allow-Origin '. Если непрозрачный ответ отвечает вашим потребностям, установите режим запроса «no-cors», чтобы получить ресурс с отключенным CORS.

Это означает, что на сервере, на котором размещен ресурс, должен быть включен CORS. Что вы можете сделать на стороне клиента, это установить режим извлечения на CORS.

fetch(request, {mode: 'cors'});

Кредиты на этот пост для всей предоставленной информации. Проверьте это для более подробной информации.

...