10 months ago
i have develop app in fast api like book translator if i can translate large file face this issue how to solve this tell me about ?
when my file half translate face this erro why ?
:1 Access to XMLHttpRequest at 'https://exciting-stillness-venv.up.railway.app/api/translate' from origin 'https://book-translator-ui.vercel.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.Understand this error TranslationService.js:240 Translation error: AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request:
XMLHttpRequest, …} translateDocument @ TranslationService.js:240 await in translateDocument handleSubmit @ TranslationForm.jsx:135 callCallback2 @ chunk-6BKLQ22S.js?v=b46cab8a:3674 invokeGuardedCallbackDev @ chunk-6BKLQ22S.js?v=b46cab8a:3699 invokeGuardedCallback @ chunk-6BKLQ22S.js?v=b46cab8a:3733 invokeGuardedCallbackAndCatchFirstError @ chunk-6BKLQ22S.js?v=b46cab8a:3736 executeDispatch @ chunk-6BKLQ22S.js?v=b46cab8a:7014 processDispatchQueueItemsInOrder @ chunk-6BKLQ22S.js?v=b46cab8a:7034 processDispatchQueue @ chunk-6BKLQ22S.js?v=b46cab8a:7043 dispatchEventsForPlugins @ chunk-6BKLQ22S.js?v=b46cab8a:7051 (anonymous) @ chunk-6BKLQ22S.js?v=b46cab8a:7174 batchedUpdates$1 @ chunk-6BKLQ22S.js?v=b46cab8a:18913 batchedUpdates @ chunk-6BKLQ22S.js?v=b46cab8a:3579 dispatchEventForPluginEventSystem @ chunk-6BKLQ22S.js?v=b46cab8a:7173 dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ chunk-6BKLQ22S.js?v=b46cab8a:5478 dispatchEvent @ chunk-6BKLQ22S.js?v=b46cab8a:5472 dispatchDiscreteEvent @ chunk-6BKLQ22S.js?v=b46cab8a:5449Understand this error TranslationForm.jsx:182 Translation error: AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}
Pinned Solution
10 months ago
Hello,
Your FastAPI backend isn't allowing requests from your Vercel frontend due to missing CORS headers. To fix it, add CORSMiddleware in your FastAPI app with allow_origins=["https://book-translator-ui.vercel.app"]. This should stop the browser from blocking cross-origin requests and also reveal real backend errors if translation fails halfway.
2 Replies
10 months ago
Do you have the CORS Middleware properly configured in your FastAPI app? See https://fastapi.tiangolo.com/tutorial/cors
10 months ago
Hello,
Your FastAPI backend isn't allowing requests from your Vercel frontend due to missing CORS headers. To fix it, add CORSMiddleware in your FastAPI app with allow_origins=["https://book-translator-ui.vercel.app"]. This should stop the browser from blocking cross-origin requests and also reveal real backend errors if translation fails halfway.
Status changed to Solved chandrika • 10 months ago