Django 向浏览器发送响应它收到此错误：请求的资源上不存在“Access-Control-Allow-Origin”标头

Posted 2023-03-03

【中文标题】Django 向浏览器发送响应它收到此错误：请求的资源上不存在“Access-Control-Allow-Origin”标头

【英文标题】：Django sends it response to browser it gets this error: No 'Access-Control-Allow-Origin' header is present on the requested resource

【发布时间】：2021-03-11 15:02:57

【问题描述】：

我使用 Django Rest Framework 作为后端，使用 ReactJS 作为前端。我的 DRF 文件如下所示

settings.py

ALLOWED_HOSTS=['*']

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'corsheaders',
    'ecom',
    'rest_framework',
    
]

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

CORS_ALLOW_ALL_ORIGINS = True

后端/urls.py

from django.contrib import admin
from django.urls import path, include


urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('ecom.urls')),
]

ecom/urls.py

from django.urls import path
from ecom import views

urlpatterns = [
    path('categories/',views.CategoryList.as_view(), name = 'categories'),
    path('categories/<int:pk>/',views.CategoryDetail.as_view(), name = 'categories_detail'),
    path('products/',views.ProductList.as_view(), name = 'products'),
    path('products/<int:pk>/',views.ProductDetail.as_view(), name = 'products_detail'),
]

REACTJS

App.js

import React , Fragment, useEffect, useState from 'react';

import axios from 'axios';

function App() 
  const [data, setData] = useState(hits: []);
 


  useEffect(async ()=>
    const result = await axios(
      `http://127.0.0.1:8000/categories/` ,
    );

    setData(result.data)
    );


return(
  <ul>
    data.hits.map(item=>(
      <li key=item.id >item.name</li>
    ))
  </ul>
)





export default App;

结果

Access to XMLHttpRequest at 'http://127.0.0.1:8000/categories/' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

GET http://127.0.0.1:8000/categories/ net::ERR_FAILED

我在 Postman 中测试过，我的 API 响应很好。我可以看到我的 API。但是，当浏览器尝试获取 API 时，CORS 会抱怨（我已经安装了 django-cors-headers），但是，我按照文档并尝试了所有可能的方法来获取浏览器上的响应。

似乎是什么问题？它在 App.js 代码中吗？我是 React 新手，所以如果我的前端代码是正确的，我不是很自信。

如果需要，我可以提供更多信息。

【参考方案1】：

我尝试了很多方法，但这是唯一可行的方法。

CORS_ORIGIN_WHITELIST = (
   
    "http://127.0.0.1:8000",
    "http://localhost:3000",
    
)

不要使用CORS_ALLOW_ALL_ORIGINS = True，而是使用CORS_ORIGIN_WHITELIST。如果有人有其他问题，请随时发表评论。希望它也能对其他人有所帮助。