警告：使用 NextJS/React + Django Rest Framework 时收到非布尔属性“crossOrigin”的“true”

Question

我一直收到此警告，但不知道它可能源自何处或如何解决。它似乎凭空出现。我返回了一些提交，但警告仍然出现，尽管我确信当我最初处理这些提交时它并不存在。我怀疑它可能与 CORS 有关，或者与我的 Snake_case 到 CamelCase 转换中间件有关。

我正在使用 NextJS/React 前端和 Django Rest Framework 后端。

错误信息：

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 设置.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",
]

React 前端 API 调用：

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()
}

Answer 1

这个问题实际上是一个愚蠢的错误。在我的根

layout.ts

文件中，我不小心将

crossOrigin

作为属性添加到

<link>

元素。这是复制粘贴错误。