stackblitz
API integration not working (CORS issue?)
Describe the bug
I have spent the better part of two days and millions of tokens trying to resolve this issue. I noticed today that a new feature was released around Request Relay that I would think have solved this issue for me but alas no success. I am trying to implement this API, which works when I run in the console but continue to receive errors when I have Bolt implement in the react app. I've even tried corsproxy.io.
https://supadata.ai/en/documentation/youtube/get-transcript
Link to the blitz that caused the error
https://bolt.new/~/sb1-p8cny9tv
Steps to reproduce
- Go to Tester in the left nav
- Click run test
- View console
Note: I did not try locally but this seems like a webcontainer issue
Expected behavior
Should fetch the youtube transcript
Parity with Local
- [X] I have run the project in my local machine and I could not reproduce the issue.
Screenshots
Platform
- OS: [e.g. macOS, Windows, Linux]
- Browser: [e.g. Chrome, Safari, Firefox]
- Version: [e.g. 91.1]
Additional context
No response
Issue Analysis Report
Current Behavior
- The transcript fetching functionality is failing silently with an empty error object
- The Vite proxy configuration is not effectively handling the requests
- Network requests are not visible in browser dev tools
- The error appears to be happening at the initial fetch attempt
What Has Been Tried
- Direct API calls to Supadata (failed due to CORS)
- CORS proxy through corsproxy.io (removed)
- Vite proxy configuration attempting to forward requests
- Multiple retry mechanisms in the fetch logic
Technical Investigation
- Request Flow
- Client makes request to /api/transcript
- Vite proxy should intercept and forward to Supadata
- Response should come back through proxy
- Client code handles response/errors
Key Issues Identified The Vite proxy configuration may not be loading correctly because:
- Config imports may be circular or failing
- Environment variables might not be available during proxy setup
- Proxy headers might not be properly forwarded
Error handling is losing information because:
- Empty error objects in catch blocks
- Multiple layers of error transformation
- Async stack traces being lost
Network isolation in WebContainer:
- Limited network access
- Proxy needs special configuration for WebContainer environment
- CORS headers may be stripped
@danpreiss Supadata founder here. I just accidentally stumbled upon this issue.
have you tried the Supadata SDK https://github.com/supadata-ai/js? Perhaps this approach can unblock you.
