NextJS/React+Django Rest Framework出现crossOrigin非布尔属性警告求助

一直收到如下警告，不清楚其来源及解决方法，警告突然出现。回退到之前的几个提交版本后，警告依然存在，尽管确定当初开发这些提交时并没有该警告。怀疑这可能与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 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",
]

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

这个警告和后端的CORS配置、camelCase转换中间件完全无关，是前端React对DOM属性的校验导致的：React要求非布尔类型的DOM属性不能传递布尔值，而你项目中的某个<link>标签错误地给crossOrigin属性传了布尔值true。

解决步骤： #

1. 定位问题标签：查找Next.js项目中的根布局文件（比如app/layout.tsx）或自定义文档文件（pages/_document.tsx），找到所有使用crossOrigin属性的<link>标签（通常是引入外部字体、样式表时会用到）。
2. 修正属性值：将crossOrigin={true}修改为字符串格式的crossOrigin="true"，或者根据实际需求使用标准CORS取值：
   • crossOrigin="anonymous"：无需发送凭据（Cookie等）的跨域请求，最常用
   • crossOrigin="use-credentials"：需要发送凭据的跨域请求
3. 验证结果：重启Next.js开发服务，检查警告是否消失。

补充说明 #

回退旧版本后警告依然存在，大概率是依赖版本更新导致的（比如Next.js或React升级后，对属性类型的校验变得更严格），旧版本中这个问题没有被检测出来，但实际上属性写法一直不符合规范。

内容的提问来源于stack exchange，提问作者Darshan Kalola