颤动web CORS问题

Question

我正在使用flutter-web和.net webapi。为了记录我的请求，我尝试了Dio和Dart HTTP包。由于CORS问题，这两种方法都不起作用。请告诉我我做错了什么。有没有办法绕过这个问题？当涉及到从邮递员那里拍摄他们时，api没有问题。

示例代码

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

Flutter HTTP请求两个请求中的第一个是构建在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 : dart

  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

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

允许所有原点

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

允许特定的原点

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

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

Answer 2

当您使用Flutter Web并调用API时，Flutter使用：

印前检查请求(调用接口前)

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

它是一个OPTIONS请求，使用三个HTTP请求头：

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

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

访问-控制-允许-来源：https://foo.bar.org

访问控制允许方法: POST、GET、选项、DELETE

如果您API不接受，则需要在中配置要发送的响应选项

Access-Control-Allow-Methods例如：

访问控制允许方法: POST、GET、OPTIONS、DELETE

Access-Control-Request-Header: origin，x-Request with

出处：https://foo.bar.org

More details in Mozilla Glossary