Django和React：错误消息；您需要启用JavaScript才能运行此应用程序&引用；而不是Json

我是一个新的反应者，我试着让Django休息，然后一起反应

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

我有一个简单的看法：

class StudentView(generics.ListCreateAPIView):
    queryset = Student.objects.all()
    serializer_class = StudentSerializer

我试图通过以下方式从react获取它：

  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',
)

我想我做错了什么，但我不知道

---

谢谢

好吧，我真的不知道为什么，但我让它在Axios上工作，根本不改变我的CORS设置。如果有人知道为什么它使用axios而不是fetch，我很想知道

因此，如果发生在其他人身上，使用axios的react中的工作代码：

  axios.get("http://127.0.0.1:8000/secretariat/get_student/")
    .then(response => {
      console.log(response)
      })
    .catch(error => {
      console.log(error);
    })

---

设置CORS\U ORIGIN\U ALLOW\U ALL=True并注释其他CORS设置，以检查CORS是否导致问题。这似乎与CORS无关。这似乎是您的web应用程序中或两者之间启用了JS挑战的原因。如果你是cloudflare之类的东西的幕后策划者，但当你连接到本地主机时，它可能是一个代理或提供JS挑战的django应用程序。实际上，这似乎是一个CORS问题。我在控制台上记录了响应，然后不知何故，我又回到了我的react应用程序。所以我得到的信息是来自react的。现在，当我正确联系我的API时，我有了“从源站获取“”的访问权限已被CORS策略阻止：对飞行前请求的响应未通过访问控制检查：请求的资源上不存在“访问控制允许源站”标头。如果不透明响应满足您的需要，请将请求的模式设置为…”我将CORS更改为CORS_ORIGIN_ALLOW_ALL=True ALLOWED_HOSTS=['*']，但我的应用程序仍然拒绝该请求