Flutter web CORS问题答案

【问题标题】：Flutter web CORS issueFlutter web CORS问题
【发布时间】：2021-03-05 09:38:46
【问题描述】：

我正在使用带有.net webapi 的flutter-web。为了满足我的要求，我尝试了 Dio 和 Dart HTTP 包。由于 CORS 问题，两者都没有工作。请告诉我我做错了什么。有没有办法解决这个问题？从邮递员那里拍摄时，api没有问题。

示例代码

我添加了 var cors = new EnableCorsAttribute("", "", "*"); config.EnableCors(); 在 webapi 中也是如此。

Flutter HTTP Requests 两者中的第一个是基于 dio 构建的。

Dio dio= new Dio();
  Future postData2(user) async{
    debugPrint(user.toString());
    dynamic data = {
    'phone_number': user['country_code'] + user['phone_number'],
    'password':user['password']
    };
    final String pathUrl = "http://localhost:62435/api/Token/GetToken";
    var response = await dio.post(pathUrl, data:data, options: Options(
        headers: {
          'content-type': 'application/json',
          'Access-Control-Allow-Origin':'true'
        },
    ));
    return response.data;
  }

//Http : 飞镖

  Future postData(user) async{
    dynamic data = {
      'phone_number': user['country_code'] + user['phone_number'],
      'password':user['password']
    };
    final String pathUrl = "http://localhost:62435/api/Token/GetToken";
    dynamic response = _http.post(
      pathUrl,
      body : data,
      headers : {
        HttpHeaders.contentTypeHeader : 'application/json',
        //'Access-Control-Allow-Origin':'true'
      }
    );
    debugPrint( //response.statusCode +
        " " + response.data.toString());
  }

对于dio，至少发送checkup请求

使用 Dio 我得到以下错误。

网络选项卡中的 Dio 请求标头。该请求仍处于待处理状态。并且没有完成。

Request URL: http://localhost:62435/api/Token/GetToken
Referrer Policy: no-referrer-when-downgrade
Provisional headers are shown
Access-Control-Allow-Origin: true
content-type: application/json; charset=utf-8
Referer: http://localhost:63440/
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36
{phone_number: "123124", password: "safaSF"}

【问题讨论】：

Access to XMLHttpRequest at 'http://localhost:62435/api/Token/GetToken' from origin 'http://localhost:59789' 错误日志中的这一行告诉您正在执行跨域请求。因此它没有通过你应该在服务器端添加http://localhost:59789 作为允许的来源之一。但是，在通常情况下在邮递员中进行测试时，这将起作用，因为它不是来自另一个 Web 域。为了在服务器端进行测试，您可以允许所有域在服务器端使用*。如果您提供您使用的服务器，我们可以找到如何配置服务器。
嗨 Abhilash，我试过 var cors = new EnableCorsAttribute("", "", "*"); config.EnableCors();在 webapi 中。
这是我的新请求 Future postData(user) async{ dynamic data = {'phone_number': user['country_code'] + user['phone_number'],'password':user['password ']};最终字符串 pathUrl = "localhost:62435/api/Token/GetToken";打印（jsonEncode（数据））；动态响应 = _http.post(pathUrl,body : jsonEncode(data),headers : {HttpHeaders.contentTypeHeader : 'application/json','Access-Control-Allow-Origin':'true'}); if (response.statusCode == 200) { 返回响应； } else { throw Exception('加载失败'); } }
现在您已经删除了旧错误。这是否意味着它是一个新错误？你试过我建议的答案了吗？
这个在当时是一个新的错误。你的建议是对的。过了一会儿这个问题就解决了。我会尽快发布解决方案。

标签： flutter flutter-web

【解决方案1】：

根据上面的 cmets，我假设您使用的是 ASP .net web api。如果是这种情况，那么您也许应该正确使用 EnableCorsAttribute 的构造函数。根据文档here，您必须使用构造函数中的第一个参数来传递允许的来源列表。在您的情况下，您可以执行以下任一操作。

允许所有来源

public EnableCorsAttribute(
    "*",
    "*",
    ""
)

允许特定来源

public EnableCorsAttribute(
    "http://localhost:59789,http//localhost:another_port,http://example_domain.com",
    "*",
    ""
)

还要注意Access-Control-Allow-Origin 是response header。您不应该在请求标头中设置它。它告诉浏览器或客户端允许从哪些来源访问服务器。阅读有关 CORS 的更多信息here。

【讨论】：

【解决方案2】：

当您使用 Flutter Web 并调用 API 时，Flutter 使用：
预检请求（在调用 API 之前）

这是一个检查 CORS 协议是否被理解以及服务器是否知道使用特定方法和标头的请求。
这是一个 OPTIONS 请求，使用了三个 HTTP 请求头：

1.Access-Control-Request-Method,
2.Access-Control-Request-Headers,
3.and the Origin header.

在这种情况下，您需要检查您的 API 是否允许用于方法 OPTIONS。

访问控制允许来源：https://foo.bar.org
访问控制允许方法：POST、GET、OPTIONS、DELETE

如果您的 API 不接受，您需要配置您的响应以在
Access-Control-Allow-Methods 中发送 OPTIONS，例如：

访问控制允许方法：POST、GET、OPTIONS、DELETE
Access-Control-Request-Headers：来源，x-requested-with
来源：https://foo.bar.org

More details in Mozilla Glossary

【讨论】：