Блог

Главная - Вопросы по программированию - Проблема с Flutter web CORS

Проблема с Flutter web CORS

#flutter #flutter-web

#трепетание #флаттер-паутина

Вопрос:

Я использую flutter-web с.net webapi. Чтобы выполнить мои запросы, я попробовал HTTP-пакеты Dio и Dart. Ни один из двух не сработал из-за проблемы CORS. Пожалуйста, скажите мне, что я делаю не так. есть ли способ обойти эту проблему? Нет никаких проблем с api, когда дело доходит до того, чтобы снимать их с postman.

Пример кода

Я var cors = new EnableCorsAttribute("", "", "*"); config.EnableCors(); также добавил в webapi.

Первый из двух HTTP-запросов Flutter построен на 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"}

Комментарии:

1. Access to XMLHttpRequest at 'http://localhost:62435/api/Token/GetToken' from origin 'http://localhost:59789' Эта строка в журнале ошибок сообщает вам, что вы выполняете междоменный запрос. Следовательно, он не проходит, вы должны добавить http://localhost:59789 на стороне сервера в качестве одного из разрешенных источников. Однако в обычных случаях для тестирования в postman это будет работать, потому что это не из другого веб-домена. Для целей тестирования на стороне сервера вы можете разрешить всем доменам использовать a * на стороне сервера. Если вы укажете, какой сервер вы используете, мы можем найти, как настроить для сервера.

2. Привет, Абхилаш, я пробовал var cors = новый атрибут EnableCorsAttribute(» «, » «, «*»); конфигурация. EnableCors(); в webapi.

3. это мой новый запрос будущих postData (user) async{ динамические данные = {‘phone_number’: user[‘country_code’] user[‘phone_number’],’password’:user[‘password’]}; конечная строка pathUrl = » localhost:62435/api/Token/getToken «; print(jsonEncode(данные)); динамический ответ = _http.post(путь, тело: jsonEncode(данные), заголовки: {HttpHeaders.contentTypeHeader: ‘application/json’,’Access-Control-Allow-Origin’:’true’}); если (response.StatusCode== 200) { вернуть ответ; } else { выбросить исключение (‘Не удалось загрузить’); } }

4. Теперь вы удалили старую ошибку. Означает ли это, что это новая ошибка? Вы пробовали мой предложенный ответ.?

5. В то время это была новая ошибка. Ваши предложения были правильными. через некоторое время эта проблема была решена. Я скоро опубликую решение.

Ответ №1:

Когда вы используете Flutter Web и вызываете API, Flutter использует:
Предполетный запрос (перед вызовом API)

Это запрос, который проверяет, понятен ли протокол CORS и известно ли серверу использование определенных методов и заголовков.
Это запрос параметров, использующий три заголовка HTTP-запроса:

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

В этом случае вам необходимо проверить, разрешен ли ваш API для ПАРАМЕТРОВ методов.

Управление доступом-Разрешить-Источник: https://foo.bar.org
Разрешить методы контроля доступа: ОПУБЛИКОВАТЬ, ПОЛУЧИТЬ, ПАРАМЕТРЫ, УДАЛИТЬ

Если ваш API не принимает, вам необходимо настроить свой ответ для отправки ПАРАМЕТРОВ
, например, в Access-Control-Allow-Methods:

Разрешить методы управления доступом: ОПУБЛИКОВАТЬ, ПОЛУЧИТЬ, ПАРАМЕТРЫ, УДАЛИТЬ
заголовки запросов управления доступом: источник, x-запрошенный-с
источником: https://foo.bar.org

Более подробная информация в глоссарии Mozilla

Ответ №2:

Из приведенных выше комментариев я предполагаю, что вы используете 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 читайте здесь.

Метки: