flutter web（托管在nodejs中）使用setPathUrlStrategy时无法手动导航到其他页面（从url中删除#）

Question

我正在构建一个 flutter web 来单独服务不同的页面，页面之间没有内部导航，用户在手动输入 URL 时单独访问页面。我使用 setPathUrlStrategy (url_strategy: ^0.2.0) 删除了 url 中的#。每个页面都会有各种路径查询参数，我使用 Uri.base.queryParameters["param1"] 来获取查询参数值。所有这些都在我的开发本地主机上运行良好。但是，当部署到生产环境时，我使用 Nodejs 来托管我的 Flutter Web 应用程序，如 https://blog.logrocket.com/flutter-web-app-node-js/。网络只能加载登陆页面（例如myweb.com/home），当我手动输入网址（例如myweb.com/registration）时，我收到错误“无法获取/注册”

我尝试添加到.htaccess（如下）如此处所述（无法在 flutter web 中导航通过在从 url 中删除 # 后更改 url），但这根本没有帮助。

RewriteEngine on 
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.html?path=$1 [NC,L,QSA]

我相信我需要在 flutter web 或托管 flutter web 的 Nodejs 中的某个地方进行某种 url 重写？

那么我怎样才能做到这一点呢？

这是托管 flutter Web 应用程序的 NodeJS 代码 （../build/web是flutter web的release版本所在文件夹）

var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser'); 
var app = express();
  
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, '../build/web')));

var http = require('http');
var port = normalizePort('10810');
app.set('port', port);

var server = http.createServer(app);
server.listen(port);
server.on('error', onError);
server.on('listening', onListening);

function normalizePort(val) {
  var port = parseInt(val, 10);

  if (isNaN(port)) {
    return val;
  }

  if (port >= 0) {
    return port;
  }

  return false;
}
 

function onListening() {
  var addr = server.address();
  var bind = typeof addr === 'string'
    ? 'pipe ' + addr
    : 'port ' + addr.port;
  console.log('Listening on ' + bind);
}

flutter web代码：

 
import 'package:flutter/material.dart';
import 'package:get/get.dart'; 
import 'package:mycode/page/page_home.dart';
import 'package:mycode/page/page_reg.dart';
import 'package:mycode/page/page_status.dart';
import 'package:url_strategy/url_strategy.dart';
 

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  setPathUrlStrategy(); 
  runApp(const MyApp());
}
 

class MyApp extends StatelessWidget { 
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    String initRoute = PageReg.routeName; 
    return GetMaterialApp(
      navigatorKey: navigatorKey,
      debugShowCheckedModeBanner: false,
      title: 'EDDA Registration',
      initialRoute: PageHome.routeName,
      getPages: [
        GetPage(name: PageReg.routeName, page: () => PageReg()),
        GetPage(name: PageStatus.routeName, page: () => PageStatus()),
        GetPage(name: PageHome.routeName, page: () => PageHome()),
      ],
    ); 
  }
}

Answer 1

您的 Express 服务器的路由似乎未正确设置。当您尝试访问“/registration”时，您的 Express 服务器正在尝试执行路由而不是 Flutter/web 应用程序，因此您会收到 Cannot GET /registration 错误消息，我认为该消息也将是返回 404 状态代码，因为它不存在。

最简单的解决方案是设置来自 Express 服务器的所有 GET 请求以返回 Web 应用程序并处理其中的路由。理想情况下，路由应该在服务器端完成，但在这种情况下，您尝试在 Web 应用程序中处理它。

尝试在第 9 行后添加此代码并重新启动您的 Express 应用程序，这将在每个 GET 请求上将您的 Fluter Web 应用程序返回到 Express 服务器，然后您可以在 Web 应用程序中处理路由（请记住添加 404/路由未找到页面）也在您的 Flutter Web 应用程序中！）

app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, '../build/web')));
app.get('*', (_, res) => {
  res.sendFile(path.resolve(__dirname, '../build/web/index.html'));
});