8 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
8 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
8 months ago
Do you have the CORS Middleware properly configured in your FastAPI app? See https://fastapi.tiangolo.com/tutorial/cors
8 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 • 8 months ago