Intercept doesn't work in beforeEach

[lalicia]

I originally posted under this issue where someone had detailed the problem I was having in a different Cypress repository - I was advised to move the post to here by @nagash77.

The issue is NOT in this repository - it's in an archived repository https://github.com/cypress-io/cypress-realworld-testing-blog

The code given in cypress/e2e/practice/network-request.cy.js is:

describe("Network Requests", () => {
  beforeEach(() => {
    cy.intercept("GET", "http://localhost:3000/api/posts", (req) => {
      // this is to disable browser caching
      // https://glebbahmutov.com/blog/cypress-intercept-problems/
      delete req.headers["if-none-match"];
    }).as("posts");

    cy.visit("http://localhost:3000");
  });

The error is:

Can someone please explain why this is happening and how to fix it? I'm new to Cypress and trying to learn. Thanks :)