I have backend code written in golang and fronted using flutter web. I am trying to serve flutter web via chi router and everything seems to work fine but I get the following errors in browser console.
The script from “http://localhost:8282/flutter.js” was loaded even though its MIME type (“text/plain”) is not a valid JavaScript MIME type. localhost:8282 Uncaught (in promise) DOMException: The operation is insecure. Failed to load app from service worker. Falling back to plain tag. flutter.js:145:23 The script from “http://localhost:8282/main.dart.js” was loaded even though its MIME type (“text/plain”) is not a valid JavaScript MIME type. localhost:8282
My golang server code is as follows:
package main
import (
"github.com/go-chi/chi/v5"
"log"
"net/http"
"os"
)
func main() {
port := os.Getenv("PORT")
if port == "" {
port = "8282"
}
router := chi.NewRouter()
//Status router for testing if server is working
router.Get("/status", func(w http.ResponseWriter, r *http.Request) {
_, _ = w.Write([]byte("It is working!!!!!!!!!!!!!!!!!"))
})
//Configuring frontend
fs := http.FileServer(http.Dir("web"))
router.Handle("/*", http.StripPrefix("/", fs))
log.Printf("connect to http://localhost:%s/ for viewing flutter web", port)
log.Fatal(http.ListenAndServe("127.0.0.1:"+port, router))
}
And index.html for flutter web
<!DOCTYPE html>
<html>
<head>
<!--
If you are serving your web app in a path other than the root, change the
href value below to reflect the base path you are serving from.
The path provided below has to start and end with a slash "/" in order for
it to work correctly.
For more details:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
This is a placeholder for base href that will be replaced by the value of
the `--base-href` argument provided to `flutter build`.
-->
<base href="/">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="futa_web">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>futa_web</title>
<link rel="manifest" href="manifest.json">
<script>
// The value below is injected by flutter build, do not touch.
var serviceWorkerVersion = '532060023';
</script>
<!-- This script adds the flutter initialization JS code -->
<script src="flutter.js" defer></script>
</head>
<body>
<script>
window.addEventListener('load', function(ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
}
}).then(function(engineInitializer) {
return engineInitializer.initializeEngine();
}).then(function(appRunner) {
return appRunner.runApp();
});
});
</script>
</body>
</html>
I have reproduce this issue on github repository here.
Any help to solve this will be appreciated
This might have to do with an insecured connection. Can you establish a secure connection via
httpsinstead ofhttp? Possibly related: https://github.com/livewire/livewire/issues/1529According to this question, your server should not send out
.jsfiles astext/plain. You could either remove the type annotation alltogether or change it totext/javascript