Network Error: Failed to Fetch [CORS ERROR]

[amitosh1995]

What I'm trying to achieve

I downloaded the saleor 2.2.0 release and its running properly on "http://localhost:8000/" with the old UI.
For the new UI, i downloaded the saleor-storefront. and completed all the steps including npm i and npm start
but when i run the new UI port "http://localhost:3000/" . Some portion of the UI is available but some Part shows "NETWORK ERROR : FAILED TO FETCH"

so i tried to debug the app from chrome console.. and it shows that the problem is associated with CORS and Access-Control-Allow-Origin' header contains multiple values .

Steps to reproduce the problem

What I expected to happen

… Can someone please explain why is this happening and how can i resolve this error ?

Screenshots

System information
Operating system: Windows 10 Professional 64 bit
Browser: Google Chrome

[amitosh1995]

I am uploading a screenshot of how the New UI page looks

[piotrgrundas]

@amitosh1995 add ALLOWED_HOSTS = ['*'] to your local_settings.py in the backend or paste this in terminal in saleor folder :$env:ALLOWED_HOSTS = "*" = to store it in env variable for windows.

[maarcingebala]

@amitosh1995 Did you set BACKEND_URL env variable in the terminal that you're running the storefront app? You should set BACKEND_URL to http://localhost:8000/.

[amitosh1995]

The problem does not arrive when i clone the original repository of mirumee. It setups smooth, but when i fork the repository, and try to work on my repository then the problem appears.

@maarcingebala yes i have listed the http://localhost:8000/ in the index.tsx file. Is there any other way i should set this?

[amitosh1995]

@piotrgrundas i did as you said. now CORS problem is resolved but its showing BAD REQUEST.

[piotrgrundas]

@amitosh1995 U should add backend env var in storefront rather change that in index.tsx. Personally, I use virtualenvwrapper postactivate hooks for it:

cat ~/.virtualenvs/saleor-fron/bin/postactivate
#!/bin/zsh
# This hook is sourced after this virtualenv is activated.

export BACKEND_URL='http://127.0.0.1:8000/'
nvm use 10.9.0

Summing up U need to set:

1. ALLOWED_HOSTS=[*] in the backend settings or env var in saleor
2. BACKEND_URL='http://127.0.0.1:8000/' in env var in storefront

[amitosh1995]

@piotrgrundas and @maarcingebala Thank you. I can see the UI after setting the env var

But dashboard is not working and i cannot see the dashboard or user profile in the new UI. i have uploaded the screenshot

[piotrgrundas]

Well, that's probably because locally dashboard is served from the backend and it's running on a different port.
Try http://127.0.0.1:8000/dashboard/

Remember to install npm packages and run build-assets in saleor.

Closing this ticket since the issue is resolved.

[ntekka]

If you were like me, then you probably missed the trailing slash. If you leave it out, then the initial OPTIONS request is for /graphql (NO TRAILING SLASH) won't match the URL pattern and gets redirected to /graphql/ with an HTTP status 302.
I hope this helps future Saleor's

[ramirovazq]

I had put in backend ALLOWED_HOSTS = ["*"] but still was not working. The situation, was like ntekka mention, i was running the command $ API_URI=http://127.0.0.1:8000/graphql npm start without slash at the end of graphql, so the correct way is $ API_URI=http://127.0.0.1:8000/graphql/ npm start

[aquaerius]

The ALLOWED_HOSTS don´t need to be any, I have ALLOWED_HOSTS="127.0.01,localhost" and it runs as intended. I was missing the slash at the end of graphql. So API_URI=http://localhost:8000/graphql/ npm start works.

[lecongphuc92]

I'm getting the same error even though I've tried all of the above :(

[haydenfoote]

Hi Phuc, did you eventually work out the error?

[Batgerel53]

@amitosh1995 , @haydenfoote , @ramirovazq HI guys, id you eventually work out the error?