access-control-allow-origin 是不允许错误的，但如果省略，则预计来自 get 请求 Flutter web

Question

当我使用代码从 url 下载图像时，我的获取请求被 CORS 策略阻止：

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. 说我的请求缺少 header，所以我将它们添加为 :

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 上尝试了各种接受的答案中的许多参数组合，但 none 在我的情况下有效。你能看出我的 header 有什么问题吗？值得一提的是，我运行上 Chrome 上的网络应用处于发布模式使用命令 flutter run -d chrome --release --web-hostname localhost --web-port 5000.

非常感谢您的帮助。

更新

我注意到了这一点，但我不明白：

如果我在请求中提供 access-control-allow-origin header 我会得到错误 field access-control-allow-origin is not allowed:

但是如果我把它注释掉那么错误就是No 'access-control-allow-origin' header is present on the requested resource:

由于资源是 firebase 存储上的一个文件，我是否应该在上传图片时在资源上创建未找到 header 文件？如果是怎么办？也许在元数据中？

Answer 1

终于找到问题所在了。事实上，我被阅读错误误导了。虽然 field x is no allowed in headers 很清楚，但我误读了 No 'access-control-allow-origin' header is present on the requested resource。并认为我的请求丢失了 headers.. 所以当最终正确读取 on requested resources 时，我意识到我没有在存储桶上做任何事情：我必须为我的 Google 存储桶设置 CORS.. 因此，按照文档中的说明使用 gustily 非常简单。

我用 flutter 创建了一个 google_storage_cors.json 文件，其中包含：

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

其中 ["*"] 将针对您的域进行更改，对于本地主机部署来说，它是完美的.. [] 除了 maxAgeSeconds..

用gsutil cors set [filepath] [your bucket]上传到Google存储
使用 gut get [your bucket] 检查是否已上传。
享受下载自由。

特别感谢给了-1分的人。看到乐于助人的人总是很高兴。干杯。

希望这对那些第一次处理这个问题并且在理解错误和找到解决方案方面遇到很多困难的人有所帮助。

access-control-allow-origin 是不允许错误的，但如果省略，则预计来自 get 请求 Flutter web

access-control-allow-origin is not allowed error , but if omitted then is expected from get request Flutter web

get

cors

flutter-web

更新