ReactJS not displaying Django REST Framework API data

Question

I am trying to use ReactJS to build a simple website that pulls data from my Django REST Framework API. The issue I am running into, is that my data is not being output by React. I am certain that my Django backend is running flawlessly. I get no errors when running it, and can view my API data via "http://127.0.0.1:8000/api/".

Here is my frontend ReactJS code:

import React, { Component } from 'react';

class App extends Component {
    state = {
        usernames : []
    };


    async componentDidMount() {
        try { 
            const res = await fetch('http://127.0.0.1:8000/api/');
            const usernames = await res.json();
            this.setState({
                usernames
            });
        } catch (e) {
            console.log(e);
        }
    }

    render() {
        return(
            <div>
                {this.state.usernames.map(item => (
                    <div key={item.id}>
                        <h1>{item.username}</h1>                    
                    </div>
                ))}
            </div>
       );
    }
}

export default App

I have tried updated my CORS_ORIGIN_WHITELIST via settings.py and includes all variations of localhost.

When scripting with Python, I am able to make a request and retrieve my API data. This is the output:

[{'username': 'testname', 'created_at': '2019-12-06T00:03:50.833429Z'}, {'username': 'testname2', 'created_at': '2019-12-06T00:04:01.906974Z'}, {'username': 'testname3', 'created_at': '2019-12-06T00:04:05.330933Z'}, {'username': 'testname4', 'created_at': '2019-12-06T00:04:08.144381Z'}]

And though no ID is present in the output (Which I'm not sure why) I can still access the correct data by making a request like this: "http://127.0.0.1:8000/api/3/"

Any help is appreciated.

Do you get any client side errors in your browser's developer tools? How about if you remove the item.id reference since you already know it's not in your JSON object? — j3py
– j3py, Commented Dec 6, 2019 at 1:27
I am seeing these errors: Access to fetch at '127.0.0.1:8000/api' from origin 'localhost:3000' has been blocked by CORS policy: 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. — Tyler
– Tyler, Commented Dec 6, 2019 at 1:29
Did you try setting Access-Control-Allow-Origin: * just for the purposes of local development? Obviously, you don't want to do that in general, but doing it on your local machine while you're dev'ing is fine. See here if you are unsure of how to: techiediaries.com/django-cors — j3py
– j3py, Commented Dec 6, 2019 at 1:36

j3py · Accepted Answer · 2019-12-06 01:43:03Z

1

Set Access-Control-Allow-Origin: to * just for the purposes of local development. For security reasons you don't want to do that in production, but doing it on your local machine while you're dev'ing is fine. See here if you are unsure of how to: techiediaries.com/django-cors

answered Dec 6, 2019 at 1:43

j3py

1,29712 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tyler · Accepted Answer · 2019-12-06 01:44:24Z

1

To solve this issue, I had to install django-cors-headers. This can be done via pip install django-cors-headers

After that, I had to add the following to my settings.py file:

INSTALLED_APPS = [
    ##...
    'corsheaders'
]

MIDDLEWARE_CLASSES = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.BrokenLinkEmailsMiddleware',
    'django.middleware.common.CommonMiddleware',
    #...
]

CORS_ORIGIN_ALLOW_ALL = True

answered Dec 6, 2019 at 1:44

Tyler

4385 silver badges18 bronze badges

Collectives™ on Stack Overflow

ReactJS not displaying Django REST Framework API data

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related