Django 向瀏覽器發送響應它收到此錯誤：No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

我使用 Django Rest 框架作為我的后端和 ReactJS 作為我的前端。 我的 DRF 文件看起來像這樣

設置.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')),
]

電子商務/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

應用程序.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 的新手，所以如果我的前端代碼是正確的，我不是很自信。

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

Answer 1

我嘗試了很多方法，但這是我讓它發揮作用的唯一可能方法。

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

而不是使用CORS_ALLOW_ALL_ORIGINS = True ，而是使用CORS_ORIGIN_WHITELIST 。 如果有人有其他問題，請隨時發表評論。 希望它也能幫助其他人。