Trouble encountered while trying to access request.headers within Next.js middleware

The Next.js Middleware is not displaying the data when I try to access request.headers.

If I attempt to retrieve other information, it appears without issue. However, attempting to display headers results in an error:

Server Error
TypeError: Cannot delete property 'Symbol(set-cookie)' of #<HeadersList2>

Middleware Code Link:

export function middleware(request) {
    console.log(request.credentials); // show -> same-origin
    console.log(request.method); // show -> GET

    console.log(request.headers); // page error
    console.log(request.headers.referer); // not show / undefined
}

export const config = {
    matcher: "/:path*/generate",
};

Attempting to populate the request variable with data:

https://i.sstatic.net/m90iX.png

Error encountered when trying to display request.headers:

https://i.sstatic.net/9hNHJ.png

Answer №1

In the middleware, direct access to the headers object is not allowed. To retrieve a specific header, you should utilize the get method.

export function middleware(request) {
    console.log(request.headers.get('referer')); // This will display the value of the 'referer' header
    
    return NextResponse.next();
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Decoding Lodash: Unveiling the findwhere and copy operator in the realm of

Could someone please explain why using Lodash to fetch an object with findWhere allows for a reference copy that enables dynamic changes based on user actions, while the same operation using the copy operator fails to update the source object? I have creat ...

Obtaining information from an AngularJS Service Response and assigning it to the Controller Scope Object

I have a basic AngularJS 1.7 application where I am successfully fetching data from a web API using an AngularJS service. However, I am running into an issue where the data is not being populated in the controller scope object. I have verified that the dat ...

When a new component is loaded, React Martial UI component may face issues due to overwriting or

Currently, we are working on a vast web application that utilizes jquery and bootstrap. Our current task involves transitioning this extensive app to React with Material UI, piece by piece. As we progress towards transforming it into a React app, everythin ...

The Power of Next.js: Creating Dynamic Metadata

Trying to dynamically update metadata in NextJS 13 using a rest API backend that sends metadata such as title, description, keywords, images, etc.. The objective was to be able to update the site's metadata whenever necessary. However, there seems to ...

Switch out single quotation marks and double quotation marks

I have a variable stored in my MySQL database that needs to be able to handle both simple and double quotes. For instance: $variable = "I'm feeling great" or $variable = I'm feeling great or $variable = "I am feeling great" In my database, the ...

Ways to stop the location object from resetting in ReactJS when reloading the page

Currently, I am using Link to redirect and call another component. The code looks something like this: <Link to={{ pathname: "/app/" + app.appId, appDetail: { app: app } }}>> When I call the path /app/:appId, it triggers the AppDetails ...

The utcParse() function in D3.js might return a null value

I am struggling to parse a date format that appears as follows: 2017-02-18T09:00:00+06:00. Currently, I am attempting to use the following format for parsing: d3.utcParse("%Y-%m-%dT%H:%M:%S+%Z");, however, it is returning null. Do you have any suggesti ...

What sets npm install apart from manual installation?

I've been exploring requirejs recently. I'm trying to decide between installing it using npm install requirejs or manually downloading it from the website. Are there any differences between the two methods? Are there any advantages or disadvantag ...

Why am I unable to use a string as the src in next/image component?

After importing the Image module with the code import Image from "next/image";, I encountered an error that states: The type '{ src: string; }' cannot be assigned to type 'IntrinsicAttributes & ImageProps'. The type &apo ...

Flipping a combination of CSS 3 and JavaScript cards will cause them to flip all together in unison

Hello! I came across a really cool card flip code that is IE compatible. I made some modifications to it and got it working, but there's one problem - instead of flipping the selected card, it flips all the cards. I tried modifying the JavaScript code ...

Examining - Assessing the Link (next/link)

I am currently working on writing unit tests to verify the functionality of my navigation links. Here is a snippet from my MainNavigation.js file: import Link from 'next/link'; const MainNavigation = () => { return ( <header> ...

Activate expansive pop-up windows with primeng's dynamic dialog feature

In my Angular web application, I am using the PrimeNg modal extension to display modal popups. I have successfully passed a component to the modal service with the following code: const ref = this.dialogService.open(LogsComponent, { data: { ...

The installed NPM package does not contain the necessary TypeScript compiled JS files and declaration files

I have recently released a TypeScript library on NPM. The GitHub repository's dist (Link to Repository Folder) directory includes all compiled JavaScript and d.ts files. However, after running npm i <my_package>, the resulting module contains on ...

Firefox throwing an error with jQuery URL Get requests

Could someone help me understand why my JavaScript function is triggering the error function instead of the success function in Firefox on Ubuntu? $(document).ready(function() { console.log( "Begin" ); $.ajax({ type: "GET", dataType: "ht ...

Guide to dynamically load external JavaScript script in Angular 2 during runtime

Currently, I am integrating Twitter digits for authentication purposes. To implement this feature, a small .js script needs to be downloaded and initialized. The recommended approach is to directly fetch the file from the Twitter server. In order to succe ...

Automatically close Bootstrap 4 modal popups

I am using Bootstrap 4 and trying to make my modal automatically close after 3 seconds. I attempted a solution but it seems to not be functioning correctly. The modal itself works fine, but the auto-closing feature is not working as expected. Below is the ...

JavaScript Click Event Not Functioning

I am attempting to create an interactive feature where clicking on any image will either reveal a clear version of the picture if it is blurred, or blur the picture if it is clear. The current issue I am facing is that when I click on a blurred image, it ...

Integrating a fresh element into the carousel structure will automatically generate a new row within Angular

I'm currently working on an Angular4 application that features a carousel displaying products, their names, and prices. At the moment, there are 6 products organized into two rows of 3 each. The carousel includes buttons to navigate left or right to d ...

Canvas drawImage function not displaying image at specified dimensions

I'm having trouble loading an image into a canvas using the drawImage function. Additionally, I've implemented drag functionality but found that when moving the image inside the canvas, it doesn't follow the mouse cursor in a linear manner. ...

To close modal A in ReactJS using React-Bootstrap after opening modal B from modal A, follow these steps:

When the registration button is clicked, a signup modal appears. Is there a way to then open a login modal from within the signup modal, ensuring that the signup modal closes once the login modal pops up? show={this.props.signupModalOn} onHide={this.props. ...