I’m trying to load thumbnails from clips from twitch.tv. An example of such a thumbnail is https://clips-media-assets2.twitch.tv/CXzsrBvvfE329FjJpbitbQ%2F51975976173-offset-16224-preview-480x272.jpg

I swear I had everything working when I stopped working on this hobby project about 6 months ago, but when I came back to it last week, I was getting CORS errors when trying to load the thumbnails. After some reading, it sounded like the best way to fix this was to modify my nginx config to include another block like this

location /proxy/ {
    proxy_pass https://clips-media-assets2.twitch.tv/;
}

and modify my JS to request the thumbnail via the proxy.

        data.clips.forEach(thumbnailData => {
            const thumbnailUrl = `/proxy/${encodeURIComponent(thumbnailData.thumbnail_url.split('https://clips-media-assets2.twitch.tv/')[1])}`;
            const embeddedUrl = thumbnailData.embed_url;
            const timestamp = thumbnailData.timestamp;

            const promise = new Promise((resolve, reject) => {
                const img = new Image();
                img.onload = function () {
                    const thumbnailElement = document.createElement('img');
                    thumbnailElement.src = thumbnailUrl;
                    resolve({ element: thumbnailElement, timestamp: timestamp });
                };
                img.onerror = reject;
                img.src = thumbnailUrl;
            });

            thumbnailPromises.push(promise);
        });

However, when I load my page and check the console, I see a 502 for each thumbnail

GET https://www.streamer-summaries.com/proxy/hFSQpLyZ_cCaischUVDegQ%2F41057404469-offset-3626-preview-480x272.jpg 502 (Bad Gateway)

I don’t have any experience with nginx, so I’m unsure what’s going wrong and how to debug it. So far, I haven’t been able to figure out the exact URL that nginx is using when requesting from twitch, and I’m worried it didn’t strip the /proxy out of the URL so that it looks something like https://clips-media-assets2.twitch.tv/PROXY/CXzsrBvvfE329FjJpbitbQ%2F51975976173-offset-16224-preview-480x272.jpg. I was going to use Fiddler to look at the traffic, but I’m ssh’d into an Oracle cloud instance and had trouble getting X11 forwarding set up.

Any ideas what is going on or how to debug what is going on?