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

@@ -63,7 +63,7 @@
<div
v-if="record.image"
class="bg-cover mb-2 -mt-3 sm:-mt-4 -mx-3 sm:-mx-4"
:style="`background-image: url(${record.image});`"
:style="`background-image: url(${transformImageUrlForCors(record.image)});`"
>
<a
class="block bg-slate-100/50 backdrop-blur-md px-6 py-4 cursor-pointer"
@@ -71,7 +71,7 @@
>
<img
class="w-full h-auto max-w-lg max-h-96 object-contain mx-auto drop-shadow-md"
:src="record.image"
:src="transformImageUrlForCors(record.image)"
alt="Activity image"
@load="cacheImage(record.image)"
/>
@@ -251,7 +251,11 @@
import { Component, Prop, Vue, Emit } from "vue-facing-decorator";
import { GiveRecordWithContactInfo } from "../types";
import EntityIcon from "./EntityIcon.vue";
import { isGiveClaimType, notifyWhyCannotConfirm } from "../libs/util";
import {
isGiveClaimType,
notifyWhyCannotConfirm,
transformImageUrlForCors,
} from "../libs/util";
import { containsHiddenDid, isHiddenDid } from "../libs/endorserServer";
import ProjectIcon from "./ProjectIcon.vue";
import { NotificationIface } from "../constants/app";
@@ -360,5 +364,9 @@ export default class ActivityListItem extends Vue {
day: "numeric",
});
}
transformImageUrlForCors(imageUrl: string): string {
return transformImageUrlForCors(imageUrl);
}
}
</script>