-1

I have a problem with CORS and fetch with REACT.JS.

That's my code:

let componentMounted = true;

useEffect(() => {
        const getCars = async () => {
            const response = await fetch('http://127.0.0.1:8000/dealership/cars/?format=json', {mode: 'no-cors'});
            if(componentMounted){
                setData(await response.clone().json());
                setFilter(await response.json());
            }
            return () => {
                componentMounted = false;
            }
        }
        getCars();
    }, []);

In the Chrome console i have this error:

Uncaught (in promise) SyntaxError: Unexpected end of input (at Cars.js:17:1) at getCars (Cars.js:17:1)

And this:

Cross-Origin Read Blocking (CORB) blocked cross-origin response http://127.0.0.1:8000/dealership/cars/?format=json with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details.

In the backend i have Django and I have import Cors-headers like this:

CORS_ALLOWED_ORIGINS = [
    'http://localhost:3000',
]
nznznz88
  • 1
  • Don't use `no-cors` if you want to read the response. See [the documentation](https://developer.mozilla.org/en-US/docs/Web/API/Request/mode#value) for what it does. – Ivar Jun 03 '22 at 16:23

0 Answers0