Reactjs 本地主机：3000已被CORS策略阻止：否'；访问控制允许原点'；请求的资源上存在标头。REACT和DJANGO

我可以得到DJANGO上运行的对象列表

我想与id的产品详细信息页

。在《邮递员》中效果很好，甚至在chrome中也很好。但在我的反应中

访问位于“”的XMLHttpRequesthttp://127.0.0.1:8000/api/todos/14“起源”http://localhost:3000'已被CORS策略阻止：请求的资源上不存在'Access Control Allow Origin'标头

我正在使用Axios

Product.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);
  });

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

}，[]）

ProductDetail.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);
  });

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

我已经安装了django cors Header和这项工作很好。以下是我的settings.xml，用于cors头

Settings.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

url.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),
]

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

from rest_framework import serializers
from .models import Todo


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

视图.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),
]

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

from rest_framework import serializers
from .models import Todo


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

序列化程序.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),
]

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

from rest_framework import serializers
from .models import Todo


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

这个api调用在react中工作，我可以得到对象和控制台输出的列表

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
}
]

不起作用

我见过类似的问题，但我能够连接localhost:3000并在这里获得所有值。它仅用于id未显示的详细信息对象。

您正面临一个问题，因为您的React客户端希望从另一台服务器访问数据

---

您可以看到，有人谈论使用

django-cors-headers

和

pip-install-django-cors-headers

对不起，堆栈溢出，我的api指向两个URL。api/用户和api/TODO。我认为这是可行的，但我错了。不太清楚原因，但它解决了我的问题。

我已经安装了django cors头文件，并且工作正常。我也可以访问所有其他OBEJCT，但我无法获取具有相关id的todo信息。我会更新我的问题real quickso你不再有CORS问题了，现在在django？谢谢你的回复。我还添加了我的django。您的中间件有2个通用中间件。让我们先解决这个问题。将

'corsheaders.middleware.corsmidleware'

移动到

'django.contrib.sessions.middleware.SessionMiddleware'

之后。删除中间件的最后一个元素。同时将

corsheaders

添加到

已安装的应用程序中

@Melvyn感谢您的回复，我已经做了更改，问题仍然存在。