CORS Origin Error in Browser (Front-end Angular, Back-end Quarkus)

Question

application.properties

#WEB
quarkus.tls.trust-all=true
quarkus.http.cors=true

Controller

    @POST
    @Path("/result")
    @Consumes(MediaType.APPLICATION_JSON)
    @Produces(MediaType.APPLICATION_JSON)
    @Operation(summary = "Show Even Result.", description = "This method will provide past Events result.")
    @Transactional
    public Response showEvenResult(@Valid EventResultRequest eventResultRequest) {
        log.info("BetSettlementController.users_result() :" + eventResultRequest);

        try {
            return Response.ok(resultService.usersBetsHistory(eventResultRequest)).build();
        } catch (ParseException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
            return Response.status(Response.Status.INTERNAL_SERVER_ERROR). build();
        }

    }

Expose one API which gives an object wrapped around the Response Object when it is called. From the postman Application, it is working. but when the code is deployed on the 'prod' environment, the front end (Angular) gets a CORS error while calling the same API.

Browser Console Error

Access to XMLHttpRequest at 'https://Server-API-URL/events/result' from origin 'https://Front-end-URL' 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

Answer 1

You need to add the origin domain as well to the properties file as outlined in the documentation https://quarkus.io/guides/http-reference#cors-filter

Your properties file should look something like below:

#WEB
quarkus.tls.trust-all=true
quarkus.http.cors=true
quarkus.http.cors.origins=https://Front-end-URL
quarkus.http.cors.methods=GET,PUT,POST

Answer 2

Your application.properties shows that you enabled CORS, but it doesn't show what origins is it enabled for. You have to specify that somewhere, ie. that you want to be the API to be available for https://Front-end-URL

You can check in the browser for what origins it is actually enabled by looking for the Access-Control-Allow-Origin header in the browser's devtools