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 53a618a335
commit 0343b4cd0e
11 changed files with 304 additions and 85 deletions

View File

@@ -34,7 +34,10 @@
<div class="flex justify-center mt-4">
<span v-if="imageUrl" class="flex justify-between">
<a :href="imageUrl" target="_blank" class="text-blue-500 ml-4">
<img :src="imageUrl" class="h-24 rounded-xl" />
<img
:src="transformImageUrlForCors(imageUrl)"
class="h-24 rounded-xl"
/>
</a>
<font-awesome
icon="trash-can"
@@ -243,6 +246,7 @@ import {
import {
retrieveAccountCount,
retrieveFullyDecryptedAccount,
transformImageUrlForCors,
} from "../libs/util";
import {
@@ -828,5 +832,12 @@ export default class NewEditProjectView extends Vue {
this.latitude = event.latlng.lat;
this.longitude = event.latlng.lng;
}
/**
* Transforms image URLs to avoid CORS issues in development
* @param imageUrl - Original image URL
* @returns Transformed URL for proxy or original URL
*/
transformImageUrlForCors = transformImageUrlForCors;
}
</script>