Как связать React с Django REST?

Question

Я использую React JS с сервером Nginx и хотел бы соединиться с API-интерфейсом REST Django, работающим с Gunicorn. Когда я вызываю страницу http://18.220.194.77/ gunicorn показывает GET с кодом 200, но данные не обновляются, если я получаю доступ к http://18.220.194.77:8000/api/, я вижу работающий Django, настройки ниже:

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
    }
}

Реакция Джанго:

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;

Answer 1

Поскольку ваш веб-интерфейс и бэкэнд находятся в разных источниках , вам необходимо настроить заголовки CORS на бэкэнде, чтобы разрешить доступ к вашему веб-интерфейсу.

https://github.com/ottoyiu/django-cors-headers - это проверенная в боях библиотека для этого.