CORS issue with React + Quarkus

I have a Quarkus Backend + React Frontend. Here is how its setup:
I have created an Application (setup as a Single Page Application) and set the following options. My frontend is running at: localhost:3000 and the backend at: locahost:8080

  • Allowed Callback URLs: http://localhost:3000/callback
  • Allowed Logout URLs: http://localhost:3000
  • Allowed Web Origins: http://localhost:3000
  • Allowed Origins (CORS): http://localhost:3000

I also have setup an API, and set its audience in my Quarkus file (details given below). I have setup the create:manager permission in the API settings, and given this permission to the User Role admin.

I followed the Quarkus OIDC Guide which shows how to connect Quarkus with Keycloak, but since both Auth0 and Keycloak are OIDC providers, so I’m guessing it should be pretty similar.

My file contains:



I’m trying to create a Manager Resource on my backend but that can only be created by a user who has the create:manager permission which is given to admin User role in Auth0.

My Controller looks like this:

public class ManagerController {


    public Manager createManager(@Valid ManagerView managerView) {
        return managerService.createManager(managerView);

On the frontend, I’m using React and Redux. I’m using the Auth0 React library. I opted for using the react library instead of the js library because its easier to integrate.

I have wrapped my App with the Auth0Provider:

    <App />
  document.getElementById('root') as HTMLElement

In my redux action, I pass, the user token:

const EditableManagerRow = (props) => {
  const {getAccessTokenSilently} = useAuth0()
  const dispatch = useDispatch();
  return (
        onSave={async () => {
          const accessToken = await getAccessTokenSilently()
          dispatch(managerOperations.addManager({manager: updatedManager, accessToken}))

The dispatch action makes the request with the following headers:

      .post<T>(url, params, {
        headers: {
          Authorization: `Bearer ${accessToken}`,
          "Content-Type": "application/json",

This request goes to the backend. However, I’m getting the following CORS error in the browser:

CORS Missing Allow Origin

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 404.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at (Reason: CORS request did not succeed). Status code: (null).

What I have tried:

  • Setting Allowed Origins (CORS): http://localhost:3000, http://localhost:8080
  • Setting Allowed Callback URLs: http://localhost:3000/callback, http://localhost:8080
  • Different settings for CORS such as:
quarkus.http.cors.headers=accept, authorization, content-type, x-requested-with, Access-Control-Allow-Origin

However, nothing seems to work. I will be very grateful for any help on this.

Solved the issue, Thanks to this demo.

The problem was that I was using: quarkus.oidc.application-type=web-app in my file. I changed that to quarkus.oidc.application-type=service which is the default option, so you can actually just remove this line. Quarkus behaves differently based on this variable.

1 Like

Perfect! Thanks for sharing it with the rest of community!

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