从独立的 React 向 Django 发出 POST 请求

Question

我正在尝试使用 axios 从反应服务器 localhost:3000 向 Django 服务器 localhost:8000 发出一个简单的 post 请求。但是我收到 403 错误。

我尝试将 csrftoken 放入 headers，但我仍然遇到错误。

如何从独立的 React 服务器向独立的 Django 服务器发出 POST 请求？

import React, { useState} from 'react';
import axios from 'axios';

const App = () => {
    const [name, setName] = useState("");
    const [email, setEmail] = useState('');
    const [message, setMessage] = useState('');

    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    const csrftoken = getCookie('csrftoken');

    const messageHandler = () => {

        const sentmessage = {
            name: name,
            email: email,
            message: message,
        }

        
            axios.post("/api/messages/",
                sentmessage,
                {
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': csrftoken

                    }
                },
            ).then((res) => console.log(res));
        
    }

    return (
        <div className="page">
            <div className="message_form">
                <p><textarea name="name" onChange={(e) => setName(e.target.value)} placeholder="Enter your name " /></p>
                <p><textarea name="email" onChange={(e) => setEmail(e.target.value)} placeholder="Enter your email " /></p>
                <p> <textarea placeholder="Enter your message here... " name="message" cols="30" rows="10" onChange={(e) => setMessage(e.target.value)}></textarea> </p>
                <p><button className="sendbutton" onClick={() => messageHandler()}>Send</button></p>
            </div>
        </div>
    )
}

export default App;

Answer 1

我修正了错误。错误是因为未清除的 cookie。

从独立的 React 向 Django 发出 POST 请求

Make a POST request from standalone React to Django

django

post

http

django-rest-framework

reactjs