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

@@ -35,6 +35,72 @@ export async function createBuildConfig(mode: string): Promise<UserConfig> {
// Enable SharedArrayBuffer for absurd-sql
'Cross-Origin-Opener-Policy': 'same-origin',
'Cross-Origin-Embedder-Policy': 'require-corp'
},
proxy: {
// Proxy API requests to avoid CORS issues with restrictive headers
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
secure: false,
configure: (proxy) => {
proxy.on('error', (err, req, res) => {
console.log('[Proxy Error]', err);
});
proxy.on('proxyReq', (proxyReq, req, res) => {
console.log('[Proxy Request]', req.method, req.url, '->', proxyReq.path);
});
}
},
// Proxy partner API requests (redirect to main API)
'/partner-api': {
target: 'http://localhost:3000',
changeOrigin: true,
secure: false,
rewrite: (path) => path.replace(/^\/partner-api/, '/api'),
configure: (proxy) => {
proxy.on('error', (err, req, res) => {
console.log('[Partner API Proxy Error]', err);
});
proxy.on('proxyReq', (proxyReq, req, res) => {
console.log('[Partner API Proxy Request]', req.method, req.url, '->', proxyReq.path);
});
}
},
// Proxy image API requests
'/image-api': {
target: 'https://test-image-api.timesafari.app',
changeOrigin: true,
secure: true,
rewrite: (path) => path.replace(/^\/image-api/, ''),
configure: (proxy) => {
proxy.on('error', (err, req, res) => {
console.log('[Image API Proxy Error]', err);
});
proxy.on('proxyReq', (proxyReq, req, res) => {
console.log('[Image API Proxy Request]', req.method, req.url, '->', proxyReq.path);
});
}
},
// Proxy direct image requests from image.timesafari.app to avoid CORS issues
'/image-proxy': {
target: 'https://image.timesafari.app',
changeOrigin: true,
secure: true,
followRedirects: true,
rewrite: (path) => path.replace(/^\/image-proxy/, ''),
configure: (proxy) => {
proxy.on('error', (err, req, res) => {
console.log('[Image Proxy Error]', err);
});
proxy.on('proxyReq', (proxyReq, req, res) => {
console.log('[Image Proxy Request]', req.method, req.url, '->', proxyReq.path);
});
proxy.on('proxyRes', (proxyRes, req, res) => {
// Log the response to debug redirects
console.log('[Image Proxy Response]', req.url, '->', proxyRes.statusCode, proxyRes.headers.location || 'no redirect');
});
}
}
}
},
build: {