Проект django react createAction не работает

Вот мой actions.jsx:

import { redirect } from "react-router-dom";

const URL = import.meta.env.VITE_BASE_URL;

//Create Action
export const createAction = async ({ request }) => {
    const formData = await request.formData();

    const newBlog = {
        subject: formData.get("subject"),
        details: formData.get("details"),
        image_url: formData.get("image_url")
    }

    await fetch(`${URL}`,{
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify(newBlog)
    });
    return redirect("/");
}

export async function updateAction({ request, params }) {
    const formData = await request.formData();
    const id = params.id;
    const updatedBlog = {
        subject: formData.get("subject"),
        details: formData.get("details"),
        image: formData.get("image_url")
    }
    await fetch(`${URL}${id}/`, {
        method: "PUT",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify(updatedBlog)
    });
    return redirect(`./`);
}

//Delete Action
export const deleteAction = async ({params}) => {
    const id = params.id;
    await fetch(`${URL}${id}/`, {
        method: "DELETE"
    });
    return redirect("/");
}

Это мой Index.jsx:

import Blog from "../components/Blog"
import { Form, useLoaderData } from "react-router-dom"
import { useState } from "react"

export default function Index(props) {
    const allBlogs=useLoaderData()
    const [image, setImage] = useState('app.logomakr.com/3EC6KR')

    const handleInputChange = (event) => {
        setImage(event.target.value)
    }

    return(
        <>
        <h1>Index</h1>
        <hr/>
        <h1>Add a Post</h1>
        <Form action="/create" method="post">
            
            <label htmlFor="subject">
                Title:
                <input type="text" subject="subject" id="subject"/>
            </label>

            <label htmlFor="details">
                Write your post here:
                <input type="textarea" name="details" id="details"/>
            </label>

            <label htmlFor="image_url">
                    Image Link:
                    <input type="text" name="image_url" id="image_url"/>
            </label>

            <button>Add a New Post</button>

            </Form>
            <hr />
            {allBlogs.map((blog, i)=> <Blog blog={blog} key={i}/>)}
        </>
    )
}

Когда я пытаюсь создать новое сообщение, я получаю ошибку 400. В ней говорится, что существует проблема с actions.jsx на шестнадцатой строке, которая начинается следующим образом:

await fetch(${URL},{

Я пробовал использовать formDataToSend, но это, похоже, тоже не работает. Я не могу понять, является ли это ошибкой CORS. Когда я использую thunderclient на бэкенде, я могу отправлять сообщения, поэтому я думаю, что проблема должна быть где-то во фронтенде, но я не знаю, где искать.

Вернуться на верх