Shopify 自定义 HTML 表单到 Google Firebase Flutter 应用程序无法正常工作

Question

首先，我对此真的很陌生。我在自定义 Shopify 页面上有一个非常简单的 HTML 表单：

<form method="POST" action="https://fb-test.web.app:8080" id="myForm">
<label for="name">Name:</label> <input required="" type="text"> <input value="Submit" type="submit">
</form>

我有一个 Flutter 应用程序，它使用 Shelf 包来监听传入请求。它最终会将该数据写入 Firestore DB。这个应用程序托管在谷歌云上，似乎运行得很好。

void main() async {

  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );

  final handler = Pipeline().addMiddleware(logRequests()).addHandler(_echoRequest);

  final server = await serve(handler, 'localhost', 8080);
  print('Server listening on port ${server.port}');

//  runApp(const MyApp());
}


Future<Response> _echoRequest(Request request) async {
  if (request.method == 'POST') {
    final contentType = request.headers['content-type'];
    if (contentType != null && contentType.contains('application/x-www-form-urlencoded')) {
      final form = await request.readAsString();
      final parameters = Uri.splitQueryString(form);
      final name = parameters['name'] ?? 'Unknown';

      // Process the form data here
      print('Name: $name');
      writeFulfillmentRequest(name);


      return Response.ok('Form submitted successfully!');
    }
  }
  return Response.notFound('Not Found');
}

Future<void> writeFulfillmentRequest(String name) async {
  db.collection('quote-request-info').doc;
  if (name != '') {
    await quoteRequestCollection.doc(quoteRequestCollection.id).set({'name': name});
  }

当我输入信息并单击 Shopify 页面表单上的“提交”时，它会旋转并最终返回“此请求已超时”错误。我的字符串没有写入 Firestore。所以，

1. 我做错了什么？
2. 如何捕获并显示表单提交响应？

提前致谢。

编辑：根据 DazWilkin 的评论，我删除了端口号，并在点击提交之前调出了 Firefox 浏览器开发工具。

TSS: excluded result:  false content-scripts.js:1:61930
content-tss TSS: hosted page injected fb-test-app.web.app:3:51
content-tss MBTSS: Nonce:  yufinut1v0psa9p356d4v9or6ocy6k2pq944vnosu9kd fb-test-.web.app:3:99
Loading from existing service worker. flutter_bootstrap.js:3:659
Service worker already active. flutter_bootstrap.js:3:907
Injecting <script> tag. Using callback. flutter_bootstrap.js:1:1846
Source map error: Error: request failed with status 404
Stack in the worker:networkRequest@resource://devtools/client/shared/source-map-loader/utils/network-request.js:43:9

Resource URL: https://fb-test-app.web.app/flutter_bootstrap.js
Source Map URL: flutter.js.map

看起来像是 404 错误。我到底需要在请求中使用端口号吗？

Answer 1

无法让它发挥作用。我只是将其全部拆解并编写了一个托管在 Google Cloud 上的 Flutter 应用程序，该应用程序检索信息并将其存储在 Firestore 中。我将该应用程序的 URL 放入我的 Shopify 自定义页面的框架中，一切都很顺利。