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();
});
});
},
);
}
}