0

I try to retrieve data from my django server to render it with react but I encountered a probem: The data doesen't render.

I have my django server running in localhost:8000 and react app running in localhost:3000

my App.js:

import React from 'react';
import axios from 'axios';

class App extends React.Component {

    state = {
        details : [],
    }

    componentDidMount() {

        let data ;

        axios.get('http://localhost:8000/wel/')
        .then(res => {
            data = res.data;
            this.setState({
                details : data
            });
        })
        .catch(err => {})
    }

  render() {
    return(
      <div>
            {this.state.details.map((detail, id) =>  (
            <div key={id}>
            <div >
                  <div >
                        <h1>{detail.detail} </h1>
                        <footer >--- by
                        <cite title="Source Title">
                        {detail.name}</cite>
                        </footer>
                  </div>
            </div>
            </div>
            )
        )}
      </div>
      );
  }
}

export default App;

and my server page where I try to retrieve data from:

localhost:8000/wel

what's going on?

Ahmet Uyar
  • 17
  • 5

1 Answers1

0

I think you encountered No Access-Control-Allow-Origin Header error.

I suggest you to open the inspect window and check if this error occurs.

If it is, then I suggest you to visit this one. django-cors-headers not work

And if you are not using django rest-framework, I suggest to use it.

sirius9515
  • 309
  • 1
  • 8