# Preflight doesn't pass access control check with Auth0 & Nextjs

**URL:** <https://community.auth0.com/t/preflight-doesnt-pass-access-control-check-with-auth0-nextjs/139776>\
**Category:** Get Help\
**Tags:** apis, application\
**Created:** [July 26, 2024, 12:17pm UTC](https://community.auth0.com/t/preflight-doesnt-pass-access-control-check-with-auth0-nextjs/139776 "2024-07-26T12:17:56Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ethan.c](https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/User_font_awesome.svg/768px-User_font_awesome.svg.png) [@ethan.c](https://community.auth0.com/u/ethan.c)\
**Post date:** [July 26, 2024, 12:17pm UTC](https://community.auth0.com/t/preflight-doesnt-pass-access-control-check-with-auth0-nextjs/139776/1 "2024-07-26T12:17:56Z")

</div>

Ready to post? 🔍 First, try searching for your answer.  
Anyone getting this error:

> Access to fetch at ‘’ (redirected from ‘[http://localhost:3000/api/auth/login?\_rsc=1wtp7](http://localhost:3000/api/auth/login?_rsc=1wtp7)’) from origin ‘[http://localhost:3000](http://localhost:3000)’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

Been stuck on it for a few days, where I’ve added the following function in Middleware

```auto
function handleCors(request: NextRequest, response: NextResponse<unknown>) {
    if (request.nextUrl.pathname.startsWith("/api")) {
      console.log('API request: ', request.nextUrl.pathname)
      response.headers.append('Access-Control-Allow-Credentials', "true")
      response.headers.append('Access-Control-Allow-Origin', '*')
      response.headers.append('Access-Control-Allow-Methods', 'GET,DELETE,PATCH,POST,PUT,OPTIONS')
      response.headers.append(
        'Access-Control-Allow-Headers',
        'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version, Content-Type, Authorization, Authorize, RSC, Next-Router-State-Tree, Next-Router-Prefetch, Cache-Control, Same-Origin'
      )
      return response;
    }
}

```

and done similar patterns via next.config.js and route level too but same error.

---

<div class="post-metadata">

**Author:** ![sebastianN](https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/User_font_awesome.svg/768px-User_font_awesome.svg.png) [@sebastianN](https://community.auth0.com/u/sebastianN)\
**Post date:** [August 15, 2024, 7:05pm UTC](https://community.auth0.com/t/preflight-doesnt-pass-access-control-check-with-auth0-nextjs/139776/2 "2024-08-15T19:05:33Z")

</div>

I had a very similar issue. Following this GitHub issue [(CORS Errors on logout)](https://github.com/auth0/nextjs-auth0/issues/757) I was able to fix it.

Next.js does something fantastic with prefetching links as it speeds up the UX. However, in this case with Auth0 they have an internal block on this.

From the looks of your issue, you are creating a login button. This will likely be the origin of your problem not your headers. Try switching your `Link` tag to an `a` tag.

My original:

```ts
import { Button } from "../ui/button";
import Link from "next/link";

export default function LogoutButton({ ...props }) {
  return(
    <Link
      href={"/api/auth/logout"}
      >
      <Button {...props}>
        Logout
      </Button>
    </Link>
  )
}

```

Fix:

```ts
import { Button } from "../ui/button";

export default function LogoutButton({ ...props }) {
  return(
    <a
      href={"/api/auth/logout"}
      >
      <Button {...props}>
        Logout
      </Button>
    </a>
  )
}

```

I hope this helps, because I know how frustrating it was for me to fix it as well.

---

<div class="post-metadata">

**Author:** ![ethan.c](https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/User_font_awesome.svg/768px-User_font_awesome.svg.png) [@ethan.c](https://community.auth0.com/u/ethan.c)\
**Post date:** [August 15, 2024, 7:15pm UTC](https://community.auth0.com/t/preflight-doesnt-pass-access-control-check-with-auth0-nextjs/139776/3 "2024-08-15T19:15:50Z")

</div>

Yeahh this was the issue, I ended up switching all my Links for auth0 to Anchors and it started working… a fustrating bug that was hard to debug!

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/auth0/original/3X/b/5/b560f266932fcce5d57f09a6595bd50518cae3f3.jpeg) [@system](https://community.auth0.com/u/system)\
**Post date:** [August 29, 2024, 7:16pm UTC](https://community.auth0.com/t/preflight-doesnt-pass-access-control-check-with-auth0-nextjs/139776/4 "2024-08-29T19:16:07Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.