Access to fetch at has been blocked by CORS policy

[biu9]

I followed the instructions in the document to complete the code and dashboard settings, but when I sent a request to ' http://localhost:3000/api/workos, I received a CORS error

This is the code that initiated my request:

fetch('http://localhost:3000/api/workOS',{
  method: 'GET',
})

This is my api/workOS/route.ts

import { NextResponse } from 'next/server';
import { WorkOS } from '@workos-inc/node';

const workos = new WorkOS(process.env.WORKOS_API_KEY);
const clientId = process.env.WORKOS_CLIENT_ID as string;

export async function GET() {

  const authorizationUrl = workos.userManagement.getAuthorizationUrl({
    // Specify that we'd like AuthKit to handle the authentication flow
    provider: 'authkit',

    // The callback URI AuthKit will redirect to after authentication
    redirectUri: 'http://localhost:3000/api/authCallback',
    clientId,
  });

  // Redirect the user to the AuthKit sign-in page
  return NextResponse.redirect(authorizationUrl);
}

and my nextjs version is 14.0

Here is an error screenshot

Any help or guidance would be appreciated, thanks!

[benoitgrelard]

Are you making the request from the client? That getAuthorizationUrl call should be made server-side. With Next 14, you can call it directly in your page.tsx as by default it is a server component.

See here: https://github.com/workos/authkit/blob/main/src/app/using-hosted-authkit/basic/page.tsx#L19-L23

[biu9]

I sent a request to /api/workOS on the client side. In the api /api/workOS(which runs on server-side), I called getAuthorizationUrl and return NextResponse.redirect(authorizationUrl), but when I did this, I received a CORS Error.

The solution you mentioned (https://github.com/workos/authkit/blob/main/src/app/using-hosted-authkit/basic/page.tsx#L19-L23) works fine.

But the access method in your document (https://workos.com/docs/user-management/2-add-authkit-to-your-app) seems to be that the backend establishes a getAuthorizationUrl endpoint and returns a url redirection, but when I did this, I received the error mentioned above.

I want to know if I have a misunderstanding of the access method in the document? Thanks.

[andy-hook]

Hey @biu9

I want to know if I have a misunderstanding of the access method in the document?

As that endpoint handles the redirect to AuthKit you need to be directing users to it, rather than fetching it on the client.

For example:

<a href="http://localhost:3000/api/workOS">Sign In</a>

As @benoitgrelard mentioned, in a next 14 environment the authorization URL can be generated directly in a server component, entirely removing the need for that endpoint.

If you are using next 13 / 14 we recommend using it with a server component for simplicity, we’ll look into making this clearer in the documentation.

Hope this helps.