Flutter Web 跨域問題解決方案

最近對Flutter Web產生了興趣，以前一直在用Flutter寫客戶端，感受寫的很爽，既然Flutter對Web也進行了支持，我爲啥不寫一個web的來玩一下呢？ 而後着手寫，靜態頁面寫起來基本沒啥問題，但是想加接口的時候，卻遇到了瀏覽器跨域問題，很榮幸解決掉了，廢話很少說，下面來分享下如何解決的吧：

---

前置條件：

待請求接口：https://developer.mozilla.org/api/v1/whoami 這裏咱們拿這個接口來試驗

正常咱們使用dio訪問：

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

必定會遇到這個問題：

很明顯，瀏覽器給限制跨域了。怎麼解決呢？

---

解決方案其實蠻多的，對純前端來講方案不少，Flutter呢，我比較推薦的這幾個方法是：

1. chrome 安裝這個插件 插件地址 ：

安裝後，簡單配置下下面圖中的一些值便可，主要就是

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

而後在Web頁面打開對應的開關便可。

2. 配置Nginx，配置太多這裏就不說了，網上不少。
3. 接下來咱們重點講一下flutter特有的方式，參考思路來源前端的解決方案，先來看下前端的方案，對應文章地址：juejin.im/post/5d1ecb…

看到了這裏，我正好週末看到dart能夠寫服務器，那是否是能夠參考下？ 因而我找到了這個：

shelf_proxy 簡單封裝了一下： shelf

很早前我還看到過這個，不知幹啥的，如今用到了，才知道原來如此，雖然star很少，但倒是Dart官方的，用於本地調試接口使用，仍是很靠譜的。

對應到我項目裏怎麼用的呢？咱們來看下 關鍵代碼：

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,代理服務器啓動了！

接下來，咱們前端的flutter代碼，也就是上面的請求，改爲

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

接下來點請求，果真正常拿到結果：

到這爲止，跨域的問題完美解決，所有用dart來解決了(這是我最想要的）！😸

固然了，這只是個demo級別的代碼，還有不少細的東西能夠重寫定製。 若是你們有什麼更好的建議，歡迎告訴我哦~

ps：爲何要把這個服務文件放在前端，目的是依賴庫能夠直接用，再就是運行代理服務也方便，後面能夠跟運行代碼一塊兒啓動，好比寫個批處理是吧。。。