Cors-erorr возникает, когда я отправляю почтовый запрос, но corsheaders настроены

Я хочу сделать запрос на пост для бэкэнда из фронтэнда, но получаю ошибку в браузере. Я протестировал это через postman - проблем с логикой на бэкэнде нет, и я правильно настроил corsheaders, я думаю. (frontend - Next.js) (backend - Django rest)

settings.py

CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
    "http://127.0.0.1:3000",
]
CORS_ALLOW_ALL_ORIGINS = True

CORS_ORIGIN_WHITELIST = [
    "http://localhost:8000",
]
CORS_ALLOW_METHODS = [
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
]

вот мой запрос на этот пост с фронта, не смог найти в нем никаких ошибок

page.js

'use client'
import styles from "./page.module.css";
import axios from "axios";
import { useState } from "react";
export default function Home() {

  const [data, setData] = useState([]);
  const [postData, setPostData] = useState({
    password: "",
    message: "",
  });

  const handleSubmit = async (event) => {
    event.preventDefault();
    try{
      const res = await axios.post("http://127.0.0.1:8000/message-post/", postData, {
        headers : {
          'Content-Type': 'application/json'
        }
      });
      const data = res.data;
      setData(data);
    } catch(error){
      console.log(error);
    }
  }

  return (
    <div>
      {data.map((dat, index) => (
        <div key={index}>
            <a>{dat.message}</a>
        </div>
      ))}
        <form className={styles.formdata} method="POST" onSubmit={handleSubmit}>
          <div className={styles.input_fields}>
            <a className={styles.textupper}>Chatting anonymously</a>
            <input className={styles.password} type="text" placeholder="Enter password"
                value={postData.password} onChange={(e) => setPostData({...postData, password: e.target.value})}></input>

            <textarea className={styles.message} type="text" placeholder="Massage..." 
                value={postData.message} onChange={(e) => setPostData({...postData, message: e.target.value})}></textarea>
            <button className={styles.encrypt} type="submit">Encrypt message</button>
          </div>
        </form>
    </div>
  );
}

This shows this cors-error

The preflight request works fine, and the response shows that only POST and OPTIONS are available for this url

Чтобы cors был включен в ваши ответы, вам нужно будет добавить его и в промежуточные модули. Учитывая, что вы не добавили его, поскольку он не упоминается в фрагментах кода, вы можете следовать руководству здесь: https://www.geeksforgeeks.org/how-to-enable-cors-headers-in-your-django-project/

Для получения дополнительной информации о том, как работает промежуточное ПО CORS в django, вы можете просмотреть ресурсы, упомянутые в этом ответе: https://stackoverflow.com/a/35761088/11539362

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