Fetch the image as a blob before loading to properly handle CORS#5430
Fetch the image as a blob before loading to properly handle CORS#5430jpggvilaca wants to merge 4 commits intodevelopfrom
Conversation
There was a problem hiding this comment.
Pull request overview
This PR updates the image loading mechanism to properly handle CORS by fetching images as blobs before loading them into Image elements, resolving cross-origin issues between the frontend dev server and backend running on different ports.
Changes:
- Modified
loadImagefunction to fetch images as blobs via the fetch API with CORS credentials - Added proper cleanup of object URLs after image loading completes
- Preserved existing test environment behavior with early return path
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
📊 Test coverage report
|
Docker Image SizesCPU
GPU
XPU
|
Why cannot we set proper headers then? |
| export const loadImage = (link: string): Promise<HTMLImageElement> => | ||
| new Promise<HTMLImageElement>((resolve, reject) => { | ||
| export const loadImage = async (link: string): Promise<HTMLImageElement> => { | ||
| if (process.env.NODE_ENV === 'test') { |
There was a problem hiding this comment.
In general, I don’t like this approach, we shouldn’t have to add code just to make the test pass.
There was a problem hiding this comment.
I agree with that. Can we mock this function on the test side?
There was a problem hiding this comment.
This code is like 3 years old. Had to do with the speed we load images when loading tests. But i agree. Deleted.
Summary
Since the frontend and backend run on different ports (frontend likely on a dev server port, backend on 7860), they're different origins. The `crossOrigin = 'anonymous' is needed to read image data for canvas operations, but it requires proper CORS headers from the backend.
Now we fetch the image as a blob first, which will go through the CORS middleware correctly.
Trial & error plus copilot saved the day.
Please do test manually by opening media items multiples times and refreshing the page
How to test
Checklist