Flutter Web 应用程序无法与本地 golang http 服务器一起使用

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《Flutter Web 应用程序无法与本地 golang http 服务器一起使用》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

我知道这听起来像是一个初学者的问题，但我在这里： 我开发了一个小应用程序，供餐厅本地使用，以便服务员能够在手机上点餐。非常基本。我还开发了一个简单的 go http 服务器来实现必要的 api。它在“移动”版本上运行良好，无论是在模拟器还是实际设备中。

下一步是移植该应用程序，以便客户可以在手机浏览器中使用它。 当我将其更改为网页版本时，它在 chrome 和 edge 中工作正常，至少在 ui 和导航方面如此。但我无法使用该 api，因为我在所有请求中都收到了 xmlhttperror（这就是错误捕获返回的内容，我不知道如何获取更多详细信息）。 我对这个问题做了一些研究，答案之一包括更改 chrome 中的配置等，这对客户来说是不可能做到的。另外，似乎有可能将 go 服务器从 http 更改为 https。

这是我的go lang http服务器代码（部分）

func main() {
r := mux.newrouter()
http.handle("/", r)
r.handlefunc("/api/getgarcon", get_garcon).methods("get")
log.fatal(http.listenandserve(":8000", r))
}

get_garcon 是一个返回已注册等待者的 json 列表以供登录的函数。正如我之前所说，如果客户端是移动应用程序，它就可以正常工作。

这是应用程序中的 flutter/dart 代码

Future<List<Garcon>> getGarcon() async {
  var data;
  try {
    print(glbHttpServer + "api/getgarcon");
    data = await http.get(
      glbHttpServer + "api/getgarcon",
      headers: {'Content-Type': 'application/json','Access-Control-Allow-Origin':'*',
      'Access-Control-Allow-Methods':'HEAD, GET, POST, PUT, PATCH, DELETE, OPTIONS',
      'Access-Control-Allow-Headers':'X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method,Access-Control-Request-Headers, Authorization'},
    );
  } catch (e) {
    print("getgarcon=" + e.toString());
  }
  etc...

glbhttpserver 是一个变量，其值类似于“http://192.168.29.94:8000/” 我添加了这些标头，试图使其适用于网络应用程序。以前（对于移动应用程序）只有 'content-type': 'application/json' 标头。

作为附加信息，web 应用程序和 go 服务器位于同一台计算机上。如果我在 chrome 窗口（或 edge 窗口）中输入 http://192.168.29.94:8000/api/getgarcon ，它就会起作用。与 localhost 或 127.0.0.1 相同。

所以我在这里要问的是：哪种方法最简单？在我的应用程序中添加一些不同的代码？将服务器从 http 更改为 https？或者我还没有找到其他可用的解决方案？

最重要的是：考虑到 flutter web 的当前状态，这是否值得付出努力？

感谢您的帮助。

解决方案

您需要将这些 cors 标头添加到服务器上的响应中，而不是来自 flutter 的请求中。在 go 中，它看起来像这样。您可以创建一个中间件来为所有端点处理此问题。

func main() {
  http.HandleFunc("/", func (w http.ResponseWriter, r *http.Request) {
    w.Header().Set("Access-Control-Allow-Origin", ...)
    w.Header().Set("Access-Control-Allow-Methods", ...)
    w.Header().Set("Access-Control-Allow-Headers", ...)

    ...
  })
  
  ...
}

移动应用程序没有相同的 cors 限制，这就是为什么您不会注意到它。但是，如果您尝试在移动浏览器中加载 flutter 网站，您会注意到相同的行为。

今天带大家了解了的相关知识，希望对你有所帮助；关于Golang的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~