CODEWITHSUNDEEP
pythondjangoreactjsamazon-web-servicesdjango-rest-framework
Hiago Bonamelli
Hiago Bonamelli

Reputation: 381

How to connect React with Django REST?

I am running React JS with the Nginx server, and would like to connect with the Django REST API running with Gunicorn. When I call the page http://18.220.194.77/ gunicorn shows the GET with code 200, but the data is not updated, if I access http://18.220.194.77:8000/api/ I can see Django working, below settings:

Nginx:

server {
   listen 80 default_server;
   server_name 18.220.194.77;
   root /var/www/frontend/build;

   location /api {
        proxy_pass http://18.220.194.77:8000;  # this is where you point it to the Django server
    }

   location / {
        try_files $uri $uri/ /index.html; # this is where you serve the React build
    }
}

React served by Django:

import React, { Component } from 'react';

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

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

  render() {
    return (
      <div>
        {this.state.todos.map(item => (
          <div key={item.id}>
            <h1>{item.title}</h1>
            <span>{item.description}</span>
          </div>
        ))}
      </div>
    );
  }
}

export default App;

Upvotes: 0

Views: 583

Answers (1)

AKX
AKX

Reputation: 168824

Since your frontend and backend are on different origins, you'll need to set up CORS headers on the backend to allow your frontend access.

https://github.com/ottoyiu/django-cors-headers is a battle-tested library for that.

Upvotes: 1

Related Questions