dart-archive / shelf_static

archived repo
https://github.com/dart-lang/shelf/tree/master/pkgs/shelf_static
BSD 3-Clause "New" or "Revised" License
24 stars 24 forks source link

Problem with flutter web and HTTP request #67

Closed boganiLuca closed 2 years ago

boganiLuca commented 2 years ago

I am using shelf_static to serve a Flutter web app that I'm developing and I'm trying to make it run on Windows desktop. The Flutter desktop side is pretty simple: it's mostly taken from shelf usage examples, and the relevant part is this:

final _staticHandler = createStaticHandler(webAppFolder, defaultDocument: 'index.html');
final _router = shelf_router.Router()
      ..get(
        '/time',
        (request) => shelf.Response.ok(DateTime.now().toUtc().toIso8601String()),
      );

final cascade = shelf.Cascade()
    .add(_staticHandler)
    .add(_router);
logger.i("handler ready");

try {
  var server = await shelf_io.serve(
    cascade.handler,
    InternetAddress.anyIPv4,
    port,
    securityContext: secureContext,
  );
  server.autoCompress = true;

  logger.i("Serving at https://${server.address.host}:${server.port}");

The _staticHandler serves the webAppFolder in the same path, which contains the output of the Flutter web app, and everything seems to start up just fine: the initial page of the web app is available at the given address. The problem arises when the web app performs a query to CouchDb to retrieve some data, so basically issues an HTTP GET request to an URL: the response received is correct, the only things that don't add up are the names of the root-level JSON properties. They are changed, compressed or obfuscated or something like that. I didn't notice it at first because when I debug directly the web app, everything is as expected, and the JSON properties keep their names. But, when served through shelf they change, and the web app fails to recognize the answers received by the HTTP GET. Here's an example of the difference.

Web App Shelf
"seq":false "error":false
"srT":200 "errorCode":200
"sq1":null "successText":null
"szK":null "successText":null
"syM":null "allResponseHeader":null
"stp":"GET" "method":"GET"
"sAX":"{\"total_rows\":7 "responseText":"{\"total_rows\":7
\"offset\":5 \"offset\":5
\"rows\":[\r\n{\"id\":\"f42186d6d056b4013540f797a2000316\" \"rows\":[\r\n{\"id\":\"f42186d6d056b4013540f797a2000316\"

... and so on. Notice that the internal JSON element isn't affected by this and fields like "total_rows" remain the same.

I am pretty new with HTTP GET and such, so maybe there's something obvious I'm missing, and I could probably work around this thing by using the properties order and not the name, but I would prefer avoiding this. Since I am struggling in finding help on the web for this particular setup, I'm resorting to create an issue. It's worth noting that an HTTP GET performed by the desktop app itself before serving the web app does not have this issue: in that case, the property names are as unchanged as I expect them.

kevmoo commented 2 years ago

This looks like your properties are going through our Javascript compiler and being minified.

I'm closing out this issue, since it's not related to this package. I'd ask on stack overflow.

How are you serializing your objects?

boganiLuca commented 2 years ago

Thank you, minification made while compiling the web app is the culprit, I just compiled again without minification and the problem disappeared. At the moment, I'm converting from JSON by using them as a map, so I have a constructor which takes in the JSON and initializes my object members by accessing them as a map. Something like

   MyObj(JsonObjectLite json) {
      this.error = json["error"];
      this.errorCode = json["errorCode"];
      //and so on...
   }