Отделение Django REST от внешнего интерфейса

Это немного другой вопрос. Я пытался исследовать информацию в течение нескольких часов, и, похоже, я не могу найти то, что ищу.

У меня есть бэкэнд Django REST, который я установил. Его очень простой REST API с одной моделью

Model.py

from django.db import models

# Create your models here.
class Hero(models.Model):
  name = models.CharField(max_length=60)
  alias = models.CharField(max_length=60)

  def __str__(self):
    return self.name

Я могу отправлять сообщения через интерфейс REST api, см. Изображение ниже

введите описание изображения здесь

Я бы хотел, чтобы сервер Django работал в фоновом режиме, пока я создаю интерфейс, файлы которого (index.html, main.css, app.js и т. Д.) Отделены от проекта django.

Затем я бы использовал Axios для GET, POST-данных в базу данных, используя следующий URL-адрес http://127.0.0.1:8000/api/heroes/

Ниже приведен код из моего интерфейса

import axios from "axios";

export default class SuperHero {
  constructor() {
    this.superHeroForm = document.querySelector("#superHeroForm");
    this.events();
  }

  events() {
    this.superHeroForm.addEventListener("submit", e => this.onSubmit(e));
  }

  onSubmit(e) {
    e.preventDefault();
    console.log("onSubmit ran");
    this.name = document.querySelector("#name").value;
    this.alias = document.querySelector("#alias").value;

    axios
      .post("http://127.0.0.1:8000/api/heroes/", {
        name: this.name,
        alias: this.alias
      })
      .then(res => {
        console.log(res);
      })
      .catch(e => {
        console.log(e);
      });
  }
}

Однако я получаю ошибку CROS

Access to XMLHttpRequest at 'http://127.0.0.1:8000/api/heroes/' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Как я могу отправить данные из внешнего приложения в серверное приложение без этой проблемы?

Должны ли мои файлы внешнего интерфейса быть в моем проекте django, чтобы он работал?


person Nick    schedule 29.12.2020    source источник


Ответы (1)


Независимо от того, где вы размещаете файлы внешнего интерфейса, они обслуживаются с разных серверов. поэтому вам нужно использовать https://github.com/adamchainz/django-cors-headers в вашем бэкэнде.

person auvipy    schedule 29.12.2020