Fix image CORS violations with comprehensive proxy and component updates

- Applied transformImageUrlForCors to all image-displaying components
- Added followRedirects: true to image proxy to serve actual content
- Proxy now returns 200 OK with image data instead of 301 redirects
- Maintains CORS headers required for SharedArrayBuffer support
- Added debug logging for proxy response monitoring

Resolves all image loading failures in development environment.
This commit is contained in:
Matthew Raymer
2025-07-03 04:15:26 +00:00
parent be87d38d29
commit 797db7069c
11 changed files with 304 additions and 85 deletions

View File

@@ -25,7 +25,7 @@
<div class="flex-1 flex items-center justify-center p-2">
<div class="w-full h-full flex items-center justify-center">
<img
:src="imageUrl"
:src="transformedImageUrl"
class="max-h-[calc(100vh-5rem)] w-full h-full object-contain"
alt="expanded shared content"
@click="close"
@@ -41,6 +41,7 @@
import { Component, Vue, Prop } from "vue-facing-decorator";
import { UAParser } from "ua-parser-js";
import { logger } from "../utils/logger";
import { transformImageUrlForCors } from "../libs/util";
@Component({ emits: ["update:isOpen"] })
export default class ImageViewer extends Vue {
@@ -79,6 +80,10 @@ export default class ImageViewer extends Vue {
window.open(this.imageUrl, "_blank");
}
}
get transformedImageUrl() {
return transformImageUrlForCors(this.imageUrl);
}
}
</script>