Hi everyone,
I’m working on a project with a Quarkus backend and a Next.js frontend. The backend is being developed by someone else, and the @Authenticated annotation in the backend is working as expected for authentication. However, when I try to call an endpoint from the Next.js frontend, I encounter a CORS issue.
Setup:
• Frontend: Next.js running on localhost:3000
• Backend: Quarkus running on localhost:8080
• Authentication: Using Auth0, with the @Authenticated annotation properly working on the backend.
Issue:
While the @Authenticated annotation works fine in the backend, I get the following error when trying to call an endpoint:
Access to XMLHttpRequest at **************** from origin '********* has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
What I’ve tried:
I’ve already configured the necessary CORS settings in the next.config.js file for the Next.js frontend as shown below:
import type { NextConfig } from 'next';
const nextConfig: NextConfig = {
async headers() {
return [
{
source: '/api/:path*',
headers: [
{
key: 'Access-Control-Allow-Credentials',
value: 'true',
},
{
key: 'Access-Control-Allow-Origin',
value: 'http://localhost:3000',
},
{
key: 'Access-Control-Allow-Methods',
value: 'GET, DELETE, PATCH, POST, PUT',
},
{
key: 'Access-Control-Allow-Headers',
value:
'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version',
},
],
},
];
},
async rewrites() {
return [
{
source: '/api/proxy/:path*',
destination: 'http://localhost:8080/:path*',
},
];
},
};
module.exports = nextConfig;
Error Details:
Despite setting the CORS headers in next.config.js, I’m still getting blocked by the CORS policy when calling the endpoint. The backend redirects to the Auth0 authorization URL, which causes the CORS error.
What I need:
Has anyone encountered this issue or can suggest what might be missing in my configuration? Any help or advice would be greatly appreciated!
Thank you!