Skip to content

Separating Django REST back from Front end

This is a bit of a different question. I’ve tried researching the information for a few hours now and I can’t seem to find what I am looking for.

I have a Django REST backend that I set up. Its very simple REST API that has one Model

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):

I’m able to post to via the REST api interface see image below

enter image description here

I’d like to have the Django server running in the background while I create a front end whose files (index.html, main.css, app.js ect….) are separate from the django project.

I would then use Axios to GET, POST data to the database using the following url

Below is the code from my front end

import axios from "axios";

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

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

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

      .post("", {
        alias: this.alias
      .then(res => {
      .catch(e => {

However I am getting a CROS error

Access to XMLHttpRequest at '' 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.

How can I submit data from my front end app to my back end app without having this issue?

Do my frontend files need to be in my django project for it to work?



No matter where you put your front end files, both are served from different servers. so you need to use in your back end.

User contributions licensed under: CC BY-SA
3 People found this is helpful