Междоменное решение проблемы Flutter Web

Flutter

Недавно я заинтересовался Flutter Web. Раньше я писал клиенты на Flutter, и я чувствую, что писать очень круто. Поскольку Flutter также поддерживает Интернет, почему бы мне не написать веб-сайт, чтобы поиграть с ним? Потом я начал писать, в принципе нет проблем с написанием статических страниц, но когда я хотел добавить интерфейс, я столкнулся с кроссдоменной проблемой браузера.

Предварительные условия:

Запрашиваемый интерфейс:https://developer.mozilla.org/api/v1/whoamiВот этот интерфейс берем на тест

Обычно мы используем dio для доступа:

Response response = await dio.get("https://developer.mozilla.org/api/v1/whoami");

Должна быть такая проблема:

Очевидно, браузер для ограничения междоменного. Как это решить?

Решений на самом деле достаточно много.Решений для чистого фронтенда много.Что касается Flutter, то я рекомендую следующие методы:

  1. хром установить этот плагинАдрес плагина:

После установки просто настройте некоторые значения на следующем рисунке, в основном

Request headers:要代理的地址，
Response headers:*，
Access-Control-Allow-Headers:true

Затем включите соответствующий переключатель на веб-странице.

  1. Настройте nginx, конфигурация слишком много здесь, есть много онлайн.
  2. Далее сосредоточимся на уникальном методе флаттера, обратимся к внешнему решению источника идеи, сначала посмотрим на внешнее решение, соответствующее адресу статьи:nuggets.capable/post/684490…

Увидев это, я только что увидел, что dart может писать на сервер в выходные, я могу сослаться на него? Итак, я нашел это:

shelf_proxyПросто инкапсулировано:shelf

Я видел это давно.Я не знаю, что он делает.Теперь, когда я его использую, я знаю, что это то же самое.Хоть звезд не так много, но он официальный от Дарта.Это очень надежно для использование локального интерфейса отладки.

Как это использовать в моем проекте? Давайте взглянемключевой код:

import 'package:shelf/shelf_io.dart' as shelf_io;
import 'package:shelf_proxy/shelf_proxy.dart';

//前端页面访问本地域名
const String LocalHost = 'localhost';

//前端页面访问本地端口号
const int LocalPort = 4040;

//目标域名，这里我们将要请求火狐的这个地址
const String TargetUrl = 'https://developer.mozilla.org';

Future main() async {
  var server = await shelf_io.serve(
    proxyHandler(TargetUrl),
    LocalHost,
    LocalPort,
  );
  // 添加上跨域的这几个header
  server.defaultResponseHeaders.add('Access-Control-Allow-Origin', '*');
  server.defaultResponseHeaders.add('Access-Control-Allow-Credentials', true);

  print('Serving at http://${server.address.host}:${server.port}');
}

Затем я сохраняю приведенный выше код в папку во внешнем интерфейсе и помещаю его вlib/server/cors.dart, затем откройте командную строку и выполните:dart ./lib/server/cors.dart, прокси-сервер активирован!

Затем наш интерфейсный код флаттера, который является запросом выше, изменяется на

Response response = await dio.get("http://localhost:4040/api/v1/whoami");

Далее нажимаем на запрос и получаем результат нормально:

До сих пор междоменная проблема была решена отлично, все с использованиемdartПриходите решать (это то, что я хочу больше всего)! 😸

Конечно, это всего лишь код демонстрационного уровня, и есть много более тонких вещей, которые можно переписать и настроить. Если у вас есть предложения получше, дайте мне знать~

пс:Зачем помещать этот сервисный файл на фронтенд, цель в том, что зависимую библиотеку можно использовать напрямую, а также удобно запускать прокси-сервис, который можно запустить вместе с запущенным кодом позже, например, написать пакетный процесс , правильно? . .

Категории