forked from trent_larson/crowd-funder-for-time-pwa
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:
@@ -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: {
|
||||
|
||||
Reference in New Issue
Block a user