Request has been blocked by CORS policy: Response to preflight request doesn't pass access control check in Apache Druid

I am trying to request data from Apache Druid server in my Angular SPA and getting the next issue related to the CORS configuration:

Access to XMLHttpRequest at URL from origin 'http://localhost:4200' 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.
SERVER_URL:8889/druid/v2/?pretty:1 Failed to load resource: net::ERR_FAILED

As far as I understood from the documentation I had to change the next set of properties in my configuration file:

druid.auth.allowUnauthenticatedHttpOptions=true
druid.server.http.allowedHttpMethods =["POST", "GET", "OPTIONS"]

But even after that I still can’t retrieve any data from Druid API because of the issue.

I was also trying to fix that issue by adding the next extension to the Apache Druid configuration:

druid.extensions.coordinates=["net.acesinc.druid.extensions:cors-servlet-filter:1.0.0"]

but it also didn’t change anything.

Does someone know what I am doing wrong or how can I fix that issue with CORS?

Does anything here help?

Thank you, Peter,
Yeah, this solution should work, but I wanted to achieve the same results without introducing new services to the infrastructure, that’s why I was trying to configure CORS directly on Apache Druid side

The Same Origin Policy (SOP) is a security measure standardized among browsers. It is needed to prevent Cross-Site Request Forgery (CSRF). The “Origin” mostly refers to a “Domain”. Same Origin Policy prevents different origins (domains) from interacting with each other, to prevent attacks such as CSRF (Cross Site Request Forgery) through such requests, like AJAX. In other words, the browser would not allow any site to make a request to any other site. Without Same Origin Policy , any web page would be able to access the DOM of other pages.

This SOP (Same Origin Policy) exists because it is too easy to inject a link to a javascript file that is on a different domain. This is actually a security risk ; you really only want code that comes from the site you are on to execute and not just any code that is out there.

If you want to bypass that restriction when fetching the contents with fetch API or XMLHttpRequest in javascript, you can use a proxy server so that it sets the header Access-Control-Allow-Origin to *.

If you need to enable CORS on the server in case of localhost, you need to have the following on request header.

Access-Control-Allow-Origin: http://localhost:9999

1 Like