I’m having some trouble with the below code in my flutter web app. When initially loading a page with a few of these images, none of them load successfully. The token is good 100%, I can tap retry and it loads the image just fine.

I can check the network request tab and find nothing regarding the image URLs until I hit reload, but I can see in the console that the image widget is throwing a 401 error.

It seems as though the browser has somehow cached the images with a matching token, but why would it cache a token instead of just the image & corresponding URL?

Does the browser cache the headers on an image request and reuse old tokens when retrieving from cache?

class ImageViewWeb extends StatefulWidget {
  final String url;
  final BoxFit? fit;
  const ImageViewWeb({super.key, required this.url, this.fit = BoxFit.cover});

  @override
  State<ImageViewWeb> createState() => _ImageViewWebState();
}

class _ImageViewWebState extends State<ImageViewWeb> {
  late String url;

  @override
  void initState() {
    url = widget.url;
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Image.network(
      url,
      headers: {'Authorization': 'Bearer ${GetIt.I<CacheHelper>().getAccessToken()}'},
      fit: widget.fit,
      errorBuilder: (context, error, stackTrace) {
        return ErrorThumbnail(onTap: () {
          setState(() {
            url = Uri.parse(widget.url).replace(
              queryParameters: {...Uri.parse(widget.url).queryParameters, 't': DateTime.now().millisecond.toString()},
            ).toString();
          });
        });
      },
    );
  }
}