get - access-control-allow-origin is not allowed 错误，但如果省略，则从获取请求 Flutter web 中预期

Question

从带有代码的 url 下载图像时，我的 get 请求被 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.我的请求缺少标题，因此我将它们添加为：

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.

我在这里从各种接受的答案中尝试了很多参数组合，但在我的情况下没有一个有效。你能发现我的标题有什么问题吗？值得一提的是，我正在 Chrome 上使用命令以发布模式运行 Web 应用程序flutter run -d chrome --release --web-hostname localhost --web-port 5000。

非常感谢你的帮助。

更新

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

如果我access-control-allow-origin在请求标头中提供，我会收到错误field access-control-allow-origin is not allowed：

但是如果我将其注释掉，那么错误是No 'access-control-allow-origin' header is present on the requested resource：

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

标签： getcorsflutter-web

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 ..所以按照文档中的说明使用 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 存储
2. 检查它gut get [your bucket]是否已上传。
3. 享受下载自由。

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

希望这对第一次处理这个问题的人有所帮助，并且在理解错误和找到解决方案方面付出了很多努力。