Предупреждение: Получение `true` для небулевого атрибута `crossOrigin` при использовании NextJS/React + Django Rest Framework

Я получаю это предупреждение, но не имею представления, откуда оно может исходить и как его решить. Оно появилось как бы из ниоткуда. Я вернулся на несколько коммитов назад, и предупреждение все равно появилось, хотя я уверен, что его не было, когда я изначально работал над этими коммитами. У меня есть подозрения, что это может быть связано с CORS или с моим промежуточным ПО, преобразующим snake_case в camelCase.

Я использую NextJS/React frontend и Django Rest Framework backend.

Сообщение об ошибке:

app-index.js:35 Warning: Received `true` for a non-boolean attribute `crossOrigin`.

If you want to write it to the DOM, pass a string instead: crossOrigin="true" or crossOrigin={value.toString()}.
    at link
    at head
    at html
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
    at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:33:11)
    at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:84:9)
    at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:307:11)
    at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:181:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:114:9)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:161:11)
    at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:536:13)
    at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:129:11)
    at RSCComponent
    at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:145:11)

Django settings.py:

CORS_ALLOWED_ORIGINS = [
    "http://127.0.0.1:3000",
    "https://localhost:3000",
]

INSTALLED_APPS = [
    "core",
    "rest_framework",
    "corsheaders",
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "compressor",
]

MIDDLEWARE = [
    "django.middleware.security.SecurityMiddleware",
    "django.contrib.sessions.middleware.SessionMiddleware",
    "corsheaders.middleware.CorsMiddleware",
    "djangorestframework_camel_case.middleware.CamelCaseMiddleWare",
    "django.middleware.common.CommonMiddleware",
    "django.middleware.csrf.CsrfViewMiddleware",
    "django.contrib.auth.middleware.AuthenticationMiddleware",
    "django.contrib.messages.middleware.MessageMiddleware",
    "django.middleware.clickjacking.XFrameOptionsMiddleware",
]

Вызовы API Frontend:

import * as constants from '../constants/endpoints'
import { type Center } from '../constants/types'

export async function getCenter (centerId: string): Promise<Center> {
  const fetchData = {
    method: 'GET',
    headers: new Headers({
      Accept: 'application/json',
      'Content-Type': 'application/json; charset=UTF-8'
    })
  }
  const response = await fetch(constants.GET_CENTERS_ENDPOINT + '/' + centerId, fetchData)

  return await response.json()
}

На самом деле проблема заключалась в глупой ошибке. В моем корневом файле layout.ts я случайно добавил crossOrigin в качестве атрибута к элементу <link>. Это была ошибка копирования и вставки.

Вернуться на верх