localhost：3000 已被 CORS 策略阻止：請求的資源上不存在“Access-Control-Allow-Origin”header。 反應和 DJANGO

Question

我能夠獲得在 DJANGO 上運行的http://127.0.0.1:8000/api/todos上的對象列表，

我想要 ID 為http://127.0.0.1:8000/api/todos/14的產品詳細信息頁面。

http://127.0.0.1:8000/api/todos/14 。 在 POSTMAN 甚至在 chrome 中都可以正常工作。 但在反應我得到

Access to XMLHttpRequest at 'http://127.0.0.1:8000/api/todos/14' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header存在於請求的資源上。

我正在使用 Axios。

產品.js

const [dataItems, setDataItems] = useState([]);
useEffect(() => {
axios
  .get("http://127.0.0.1:8000/api/todos/")
  .then((res) => {
    console.log(res);
    setDataItems(res.data);
  })
  .catch((err) => {
    console.log(err);
  });

}, []);

ProductDetail.js

const [detailItems, setDetailsItems] = useState([]);
useEffect(() => {
    axios.get("http://127.0.0.1:8000/api/todos/14").then((res) => {
       console.log(res);
    });
    }, []);

我已經安裝了 django-cors-headers 和http://127.0.0.1:8000/api/todos這工作正常。 這是我的 settings.xml 用於 cors-headers。

設置.xml

INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'hero.apps.HeroConfig',
'rest_framework.authtoken',
'users.apps.UsersConfig',
'rest_framework',
'corsheaders',

]

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_ORIGIN_WHITELIST = [
    'http://localhost:3000'
]

ACCOUNT_AUTHENTICATION_METHOD = 'email'
ACCOUNT_EMAIL_REQUIRED = True
ACCOUNT_USERNAME_REQUIRED = False

網址.py

from django.contrib import admin
from django.urls import path, include
from rest_framework import routers
from . import views

router = routers.DefaultRouter()
router.register(r'todos', views.TodoView, 'todo')

urlpatterns = [

    path('api/', include(router.urls)),
    path('', views.home),
]

視圖.py

from django.contrib import admin
from django.urls import path, include
from rest_framework import routers
from . import views

router = routers.DefaultRouter()
router.register(r'todos', views.TodoView, 'todo')

urlpatterns = [

path('api/', include(router.urls)),
]

序列化程序.py

from rest_framework import serializers
from .models import Todo


class TodoSerializer(serializers.ModelSerializer):
class Meta:
    model = Todo
    fields = ('id', 'title', 'description', 'completed')

這個 api 調用在反應內部工作，我可以獲得 object 和控制台 output 的列表

http://127.0.0.1:8000/api/todos 
[
{
    "id": 14,
    "title": "First",
    "description": "first",
    "completed": false
},
{
    "id": 15,
    "title": "Second",
    "description": "second item",
    "completed": false
},
{
    "id": 16,
    "title": "Third",
    "description": "third item",
    "completed": false
}
]

http://127.0.0.1:8000/api/todos/14不起作用。

我見過類似的問題，但我能夠與 localhost:3000 建立連接並在此處獲取所有值。 它只是為了詳細說明 object 沒有顯示 id。

Answer 1

您正面臨CORS問題，因為您的 React 客戶端想要從另一台服務器訪問數據

你可以看到這個話題，有人談論使用django-cors-headers和pip install django-cors-headers

Answer 2

抱歉，堆棧溢出器，我的 api 指向兩個 url。 api/users 和 api/todos。 我認為這是可行的，但我得到了錯誤。 不太清楚為什么，但它解決了我的問題。