gradio icon indicating copy to clipboard operation
gradio copied to clipboard
verified publisher icon gradio-app

CORS problem in NextJS app

Open DanielAtCosmicDNA opened this issue 2 years ago • 4 comments

Describe the bug

When loading this Hugging Face space in nextjs with this codebase, gradio request is blocked by CORS policy.

Have you searched existing issues? 🔎

  • [X] I have searched and found no existing issues

Reproduction

1 - clone the repo https://github.com/DanielAtCosmicDNA/cosmicdna-ai/tree/6b90ba776d8b14bc74dd885d4812ad0d8a375f41 2 - Set HF_TOKEN in .env file accordingly to HF token from you space. 3 - yarn 4 - yarn dev 5 - browse localhost:3000 and check the browser console in the developer tools.

Screenshot

image

Logs

localhost/:1  Access to fetch at 'https://cosmic-dna-chat-ui.hf.space/config' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
index.js:923 
        
        
        GET https://cosmic-dna-chat-ui.hf.space/config net::ERR_FAILED
resolve_config @ index.js:923
eval @ index.js:322
await in eval (async)
client2 @ index.js:260
loadModel @ useGradio.js:18
await in loadModel (async)
eval @ useGradio.js:30
commitHookEffectListMount @ react-dom.development.js:19986
commitHookPassiveMountEffects @ react-dom.development.js:22042
commitPassiveMountOnFiber @ react-dom.development.js:22147
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22155
commitPassiveMountEffects @ react-dom.development.js:22113
flushPassiveEffectsImpl @ react-dom.development.js:25253
flushPassiveEffects @ react-dom.development.js:25194
eval @ react-dom.development.js:24936
workLoop @ scheduler.development.js:261
flushWork @ scheduler.development.js:230
performWorkUntilDeadline @ scheduler.development.js:537
app-index.js:32  TypeError: Failed to fetch
    at resolve_config (webpack-internal:///(:3000/app-client)/./node_modules/@gradio/client/dist/index.js:932:26)
    at eval (webpack-internal:///(:3000/app-client)/./node_modules/@gradio/client/dist/index.js:331:24)
window.console.error @ app-index.js:32
console.error @ hydration-error-info.js:45
eval @ index.js:330
await in eval (async)
client2 @ index.js:260
loadModel @ useGradio.js:18
await in loadModel (async)
eval @ useGradio.js:30
commitHookEffectListMount @ react-dom.development.js:19986
commitHookPassiveMountEffects @ react-dom.development.js:22042
commitPassiveMountOnFiber @ react-dom.development.js:22147
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22155
commitPassiveMountEffects @ react-dom.development.js:22113
flushPassiveEffectsImpl @ react-dom.development.js:25253
flushPassiveEffects @ react-dom.development.js:25194
eval @ react-dom.development.js:24936
workLoop @ scheduler.development.js:261
flushWork @ scheduler.development.js:230
performWorkUntilDeadline @ scheduler.development.js:537
localhost/:1  Access to fetch at 'https://cosmic-dna-chat-ui.hf.space/config' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
index.js:923 
        
        
        GET https://cosmic-dna-chat-ui.hf.space/config net::ERR_FAILED
resolve_config @ index.js:923
handle_space_sucess @ index.js:302
check_space_status @ index.js:987
await in check_space_status (async)
eval @ index.js:332
await in eval (async)
client2 @ index.js:260
loadModel @ useGradio.js:18
await in loadModel (async)
eval @ useGradio.js:30
commitHookEffectListMount @ react-dom.development.js:19986
commitHookPassiveMountEffects @ react-dom.development.js:22042
commitPassiveMountOnFiber @ react-dom.development.js:22147
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22144
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22258
recursivelyTraversePassiveMountEffects @ react-dom.development.js:22125
commitPassiveMountOnFiber @ react-dom.development.js:22155
commitPassiveMountEffects @ react-dom.development.js:22113
flushPassiveEffectsImpl @ react-dom.development.js:25253
flushPassiveEffects @ react-dom.development.js:25194
eval @ react-dom.development.js:24936
workLoop @ scheduler.development.js:261
flushWork @ scheduler.development.js:230
performWorkUntilDeadline @ scheduler.development.js:537
app-index.js:32  TypeError: Failed to fetch
    at resolve_config (webpack-internal:///(:3000/app-client)/./node_modules/@gradio/client/dist/index.js:932:26)
    at handle_space_sucess (webpack-internal:///(:3000/app-client)/./node_modules/@gradio/client/dist/index.js:311:28)
    at check_space_status (webpack-internal:///(:3000/app-client)/./node_modules/@gradio/client/dist/index.js:996:7)

System Info

gradio client: 0.1.4
Operating System: Windows 11
Browser: Edge Version 114.0.1823.67 (Official build) (64-bit)

Severity

Blocking usage of gradio

DanielAtCosmicDNA avatar Jul 01 '23 21:07 DanielAtCosmicDNA

I'm getting this too, did you happen to figure it out?

levelingup avatar Jul 27 '23 07:07 levelingup

I'm getting this too, did you happen to figure it out?

I did not figure out yet. It seems a bug to me @levelingup. So I decided to workaround and deploy my project directly to Vercel hosting instead bypassing Gradio.

DanielAtCosmicDNA avatar Aug 01 '23 10:08 DanielAtCosmicDNA

@DanielAtCosmicDNA interesting. So it worked when you deployed to vercel instead of using localhost?

levelingup avatar Aug 01 '23 14:08 levelingup

Hi @DanielAtCosmicDNA, would you mind checking if this is still in issue with the main branch of the gradio repo? You can find the install links here. Thanks in advance!

hannahblair avatar May 28 '24 15:05 hannahblair

Closing for lack of follow up

abidlabs avatar Jun 19 '24 18:06 abidlabs