Flutter Web CORS 问题

Question

我正在使用 flutter-web 和 .net webapi。为了拍摄我的请求，我尝试了 Dio 和 Dart HTTP 包。由于 CORS 问题，两者都没有工作。请告诉我我做错了什么。有办法解决这个问题吗？从 postman 拍摄它们时，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来说，至少发送了检查请求

使用 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"}

Answer 1

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

允许所有来源

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

允许特定来源

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

另请注意，这Access-Control-Allow-Origin是响应标头。您不应将其设置在请求标头中。它告诉浏览器或客户端允许从哪些来源访问服务器。请在此处阅读有关 CORS 的更多信息。