# CORS issue with React + Quarkus **URL:** \ **Category:** Get Help\ **Tags:** apis, application\ **Created:** [January 24, 2023, 9:16am UTC](https://community.auth0.com/t/cors-issue-with-react-quarkus/98787 "2023-01-24T09:16:42Z")\ **Posts on this page:** 4\ **Page:** 1
**Author:** ![kronaemmanuel](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/kronaemmanuel/32/42952_2.png) [@kronaemmanuel](https://community.auth0.com/u/kronaemmanuel)\ **Post date:** [January 24, 2023, 9:16am UTC](https://community.auth0.com/t/cors-issue-with-react-quarkus/98787/1 "2023-01-24T09:16:42Z")
I have a Quarkus Backend + React Frontend. Here is how its setup: **Auth0** 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 `application.properties` file (details given below). I have setup the `create:manager` permission in the API settings, and given this permission to the User Role `admin`. **Quarkus** I followed the [Quarkus OIDC Guide](https://quarkus.io/guides/security-openid-connect-web-authentication) 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 `application.properties` file contains: ```auto quarkus.http.cors=true quarkus.oidc.auth-server-url=https://dev-xxxxxxxxxxxx.eu.auth0.com quarkus.oidc.client-id=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx quarkus.oidc.credentials.secret=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx quarkus.oidc.application-type=web-app quarkus.oidc.token.audience=xxxxxxxxxxxxxxxxxxxxxxxxxxxx ``` 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: ```java @Path("/rest/manager") @ApplicationScoped public class ManagerController { ... @POST @Path("/") @RolesAllowed("admin") public Manager createManager(@Valid ManagerView managerView) { return managerService.createManager(managerView); } } ``` **React** On the frontend, I’m using React and Redux. I’m using the [Auth0 React](https://github.com/auth0/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`: ```auto ReactDOM.render( , document.getElementById('root') as HTMLElement ); ``` In my redux action, I pass, the user token: ```auto const EditableManagerRow = (props) => { const {getAccessTokenSilently} = useAuth0() const dispatch = useDispatch(); ... return ( ... { const accessToken = await getAccessTokenSilently() dispatch(managerOperations.addManager({manager: updatedManager, accessToken})) }} /> ) ``` The dispatch action makes the request with the following headers: ```auto .post(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: ```auto XHR OPTIONS https://dev-8eki3hqn4jblufe6.eu.auth0.com/authorize?response_type=code&client_id=OXaPjK3H8Agz3VwsQ1oJbxIhwl1XoHWP&scope=openid&redirect_uri=http://localhost:8080/rest/manager&state=eaf3f4ec-8835-41f4-94d2-61c9e28177ff CORS Missing Allow Origin Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://dev-8eki3hqn4jblufe6.eu.auth0.com/authorize?response_type=code&client_id=OXaPjK3H8Agz3VwsQ1oJbxIhwl1XoHWP&scope=openid&redirect_uri=http%3A%2F%2Flocalhost%3A8080%2Frest%2Fmanager&state=eaf3f4ec-8835-41f4-94d2-61c9e28177ff. (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 https://dev-8eki3hqn4jblufe6.eu.auth0.com/authorize?response_type=code&client_id=OXaPjK3H8Agz3VwsQ1oJbxIhwl1XoHWP&scope=openid&redirect_uri=http%3A%2F%2Flocalhost%3A8080%2Frest%2Fmanager&state=eaf3f4ec-8835-41f4-94d2-61c9e28177ff. (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 `application.properties` settings for CORS such as: ```auto quarkus.http.cors.origins=http://localhost:3000 quarkus.http.cors.headers=accept, authorization, content-type, x-requested-with, Access-Control-Allow-Origin quarkus.http.cors.methods=GET,OPTIONS,POST quarkus.http.cors.exposed-headers=Access-Control-Allow-Origin,Authorization ``` However, nothing seems to work. I will be very grateful for any help on this. ---
**Author:** ![kronaemmanuel](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/kronaemmanuel/32/42952_2.png) [@kronaemmanuel](https://community.auth0.com/u/kronaemmanuel)\ **Post date:** [January 26, 2023, 10:32am UTC](https://community.auth0.com/t/cors-issue-with-react-quarkus/98787/2 "2023-01-26T10:32:52Z")
Solved the issue, Thanks to this [demo](https://blog.zenika.com/2021/06/01/securisation-oauth2-dune-single-page-application/). The problem was that I was using: `quarkus.oidc.application-type=web-app` in my `application.properties` 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. ---
**Author:** ![konrad.sopala](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/konrad.sopala/32/13516_2.png) [@konrad.sopala](https://community.auth0.com/u/konrad.sopala)\ **Post date:** [January 26, 2023, 11:55am UTC](https://community.auth0.com/t/cors-issue-with-react-quarkus/98787/3 "2023-01-26T11:55:31Z")
Perfect! Thanks for sharing it with the rest of community! ---
**Author:** ![system](https://global.discourse-cdn.com/auth0/original/3X/b/5/b560f266932fcce5d57f09a6595bd50518cae3f3.jpeg) [@system](https://community.auth0.com/u/system)\ **Post date:** [February 9, 2023, 11:56am UTC](https://community.auth0.com/t/cors-issue-with-react-quarkus/98787/4 "2023-02-09T11:56:28Z")
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.