access-control-allow-origin недопустимая ошибка, но если опущено, то ожидается от запроса на получение Flutter web

Question

Мои запросы на получение блокируются политикой CORS при загрузке изображения с URL-адреса с кодом:

await get(product.imageUrl).then((img) async {
          print('image downloaded');
          var dwnldProd = product;
          dwnldProd.productImage = img.bodyBytes;
          await _productRepository.saveProduct(dwnldProd);
        }).catchError((e) {
          print('downloading product image error: $e');
        });

Поскольку No 'Access-Control-Allow-Origin' header is present on the requested resource. говорит, что в моем запросе отсутствовали заголовки, я добавил их как:

await get(product.imageUrl, headers: <String,String>{
          'Access-Control-Allow-Origin': '*', // Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.
//        'Access-Control-Allow-Origin':'http://localhost:5000/', // Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

          "Access-Control-Allow-Methods": "GET, POST, OPTIONS, PUT, PATCH, DELETE",
          "Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept"

        }).then((img) async {
          print('image downloaded');
          var dwnldProd = product;
          dwnldProd.productImage = img.bodyBytes;
          await _productRepository.saveProduct(dwnldProd);
        }).catchError((e) {
          print('downloading product image error: $e');
        });

, но теперь ошибка access-control-allow-origin is not allowed.

Я пробовал так много комбинаций параметров из различных принятых ответов здесь, на SO, но ни один из них не работает в моем случае. Вы можете заметить, что не так в моих заголовках? Стоит упомянуть, что я запускаю веб-приложение на Chrome в режиме выпуска с помощью команды flutter run -d chrome --release --web-hostname localhost --web-port 5000.

Большое спасибо за помощь.

UPDATE

Я заметил это и не понимаю:

Если я укажу access-control-allow-origin в заголовке запроса, я получаю сообщение об ошибке field access-control-allow-origin is not allowed:

but if I comment it out then the error is No 'access-control-allow-origin' header is present on the requested resource:

введите описание изображения здесь

Поскольку ресурс - это файл в хранилище firebase, должен ли я создавать этот заголовок not found на ресурсе при загрузке изображения? Если да, то как? Возможно, в метаданных?

Answer 1

Наконец нашел, где была проблема. На самом деле я был введен в заблуждение, прочитав ошибки. Хотя field x is no allowed in headers был довольно четким, я неправильно читал No 'access-control-allow-origin' header is present on the requested resource. и подумал, что в моем запросе отсутствуют заголовки ... поэтому, когда я наконец правильно прочитал это on requested resources, я понял, что не сделал что-то в сегменте хранилища: мне пришлось настроить CORS для моего сегмента хранилища Google .. Итак, следуя инструкциям в docs с использованием gustily было довольно просто.

1. Я создал google_storage_cors.json файл с флаттером, который содержит:

[
  {
    "origin": ["*"],
    "method": ["GET"],
    "responseHeader": ["Access-Control-Allow-Origin"],
    "maxAgeSeconds": 3600
  }
]

, где ["*"] будет изменено для вашего домен, для развертывания локального хоста это просто идеально .. [] необходимы для всех, кроме maxAgeSeconds ..

1. с gsutil cors set [filepath] [your bucket] загрузить его в Google Storage
2. с gut get [your bucket] проверьте, что он был загружен.
3. наслаждайтесь свободой загрузки.

Одно особое спасибо, которому дали -1. Всегда приятно видеть отзывчивых людей. Ура.

Надеюсь, это поможет тем, кто сталкивается с этим впервые и изо всех сил пытается понять ошибки и найти решение.