Django 和 React：错误消息“您需要启用 JavaScript 才能运行此应用程序。”

Question

我是 React 的新手，我尝试让 Django Rest 和 React 一起工作。

顺便说一句，我的 javascript 已启用。

我有一个简单的看法：

class StudentView(generics.ListCreateAPIView):

    queryset = Student.objects.all()

    serializer_class = StudentSerializer

我尝试从反应中获取它：

  useEffect(() =>{

    fetch("http://127.0.0.1:8000/secretariat/get_student/", {

      method: 'GET',

      headers: {

        'Content-Type': 'application/json',

      }

    })

    .then( resp => resp.json())

    .then( resp => setStudents(resp))

    .catch(error => console.log(error))

    

  }, [])

当我检查浏览器网络时，我得到的响应是：

我不认为我有 CORS 标头问题，但这是我的 CORS 设置。

INSTALLED_APPS = [

    'django.contrib.admin',

    'django.contrib.auth',

    'django.contrib.contenttypes',

    'django.contrib.sessions',

    'django.contrib.messages',

    'django.contrib.staticfiles',

    'django.contrib.sites',

    'corsheaders',

    'common_app',

    'rest_framework',

    'rest_framework.authtoken',

    'allauth.account',

    'rest_auth.registration',

    'ldap',

    'rest_auth',

    'simple_history',

]

MIDDLEWARE = [

    'django.middleware.security.SecurityMiddleware',

    'django.contrib.sessions.middleware.SessionMiddleware',

    'corsheaders.middleware.CorsMiddleware',

    'django.middleware.common.CommonMiddleware',

    'django.middleware.csrf.CsrfViewMiddleware',

    'django.contrib.auth.middleware.AuthenticationMiddleware',

    'django.contrib.messages.middleware.MessageMiddleware',

    'django.middleware.clickjacking.XFrameOptionsMiddleware',

    'simple_history.middleware.HistoryRequestMiddleware',

]

CORS_ORIGIN_ALLOW_ALL = False

CORS_ORIGIN_WHITELIST = (

    'http://127.0.0.1'

)

CORS_ALLOW_METHODS = (

    'DELETE',

    'GET',

    'OPTIONS',

    'PATCH',

    'POST',

    'PUT',

)

CORS_ALLOW_HEADERS = (

    'accept',

    'accept-encoding',

    'authorization',

    'content-type',

    'dnt',

    'origin',

    'user-agent',

    'x-csrftoken',

    'x-requested-with',

)

我假设我做错了什么，但我不知道。

Answer 1

好吧，我真的不知道为什么，但我让它与 Axios 一起工作，而根本没有改变我的 CORS 设置。如果有人知道为什么它使用 axios 而不是使用 fetch，我想知道。因此，如果这里发生在其他人身上，则工作代码会使用 axios 作出反应：  axios.get("http://127.0.0.1:8000/secretariat/get_student/")    .then(response => {      console.log(response)      })    .catch(error => {      console.log(error);    })