Search code examples
reactjsdjangonext.jsdjango-rest-frameworkcors

Warning: Received `true` for a non-boolean attribute `crossOrigin` when using NextJS/React + Django Rest Framework

I've been receiving this warning but have little idea where it may originating from or how to solve it. It appeared seemingly out of nowhere. I went back a few commits and the warning still appeared, although I'm certain it was not present when I was initially working on those commits. I have some suspicions it may be related to CORS, or to my snake_case to camelCase converting middleware.

I am using a NextJS/React frontend and a Django Rest Framework backend.

Error message:

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 Frontend API calls:

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

  • The problem was actually a silly bug. In my root layout.ts file I accidently added crossOrigin as an attribute to a <link> element. It was a copy and paste error.