cors: strict-origin-when-cross-origin: react + nginx + elasticsearch

Question

This afternoon I was make some small adaptations to my react app. However, when trying to fetch information from my elasticsearch server, I receive a strict-origin-when-cross-origin error. I have received CORS errors in the past and was always able to deal with them in a certain way, but this time I am quit stuck.

My set up:

I have the react app, using axios, making the following get request:

const authorization = process.env.REACT_APP_ELASTICSEARCH_AUTHORIZATION;

const header = {
'Authorization': authorization,


}

axios.get(`${path}/${searchIndex}/_search`,
            {headers: header}

The request is then send to my proxy server running nginx.

The setting there are the following:

location /somelocation/ {
         proxy_pass https://someip:someport/;
         proxy_redirect off;
         proxy_set_header  X-Real-IP  $remote_addr;
         proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_set_header  Host $http_host;
         proxy_pass_header Access-Control-Allow-Origin;
         proxy_pass_header Access-Control-Allow-Methods;
         proxy_hide_header Access-Control-Allow-Headers;
         add_header Access-Control-Allow-Headers 'X-Requested-With, Content-Type';
         add_header Access-Control-Allow-Credentials true;
         proxy_pass_header Authorization; 
}

On the elasticsearch server I have the following CORS settings:

http.cors.enabled: true
http.cors.allow-credentials: true
http.cors.allow-origin: '*'
http.cors.allow-headers: X-Requested-With, X-Auth-Token, Content-Type, Content-Length, Authorization, Access-Control-Allow-Headers, Accept
http.cors.allow-methods: OPTIONS, HEAD, GET, POST, PUT, DELETE

Making requests, using the path that the react app is using, from postman works perfectly fine. I can also perform the request from my browser, after passing the necessary username + password. Only the react app (in development running on localhost) does not seem to work.

From https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors I understand:

strict-origin-when-cross-origin (default)

Send the origin, path, and querystring when performing a same-origin request. For cross-origin requests send the origin (only) when the protocol security level stays same (HTTPS→HTTPS). Don't send the Referer header to less secure destinations (HTTPS→HTTP).

I thought that maybe the problem was situated with the fact that the app runs on HTTP and not HTTPS, but running the app via 'HTTPS=true npm start' did not solve the problem. I have tried different tweaks, both on the request side (axios) as in nginx or in the es yml file, but nothing seems to work. Thank you and kind regards for your help.

EDIT:

included screenshots now as well:

Answer 1

Ok I was able to solve the error in the course of this afternoon. First of all, not all the error messages were showing in my console, which made it fo course more difficult to detect the error. As pointed out correctly above, the error message I was seeing, was just a generic message. In my console I needed to update the settings to the following:

After that the complete CORS errors were visible, which required me to make some changes, both to the NGINX proxy server and the elasticsearch server.

The first error was: "header field authorization is not allowed by Access-Control-Allow-Headers in preflight response"

Although the elasticsearch server allowed the Authorization header, this was -correct me if I am wrong- not properly passed on by the NGINX proxy server, since the settings there were: "proxy_hide_header Access-Control-Allow-Headers;"

I changed the NGINX settings to:

         proxy_pass https://******:9200/;
         proxy_redirect off;
         proxy_set_header  X-Real-IP  $remote_addr;
         proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_set_header  Host $http_host;
         proxy_pass_header Access-Control-Allow-Origin;
         proxy_pass_header Access-Control-Allow-Methods;
#         proxy_hide_header Access-Control-Allow-Headers;
        proxy_pass_header Access-Control-Allow-Headers;
        # add_header Access-Control-Allow-Headers 'X-Requested-With, Content-Type';
        # add_header Access-Control-Allow-Credentials true;
         proxy_pass_header Authorization;

The lines that are commented out are the old configurations.

Attempting a several new requests, other CORS policies were shown, such as access-control-allow-methods is not allowed by Access-control-Allow-Headers, access-control-allow-origin is not allowed by Access-Control-Allow-Headers,... At that point the errors were clearly indicating what to do, namely adding these fields to the Access-Control-Allow-Headers section in the elasticsearch configuration file.

After completing everything, the elasticsearch config yml file looks like this:

http.cors.enabled: true
http.cors.allow-credentials: true
http.cors.allow-origin: '*'
http.cors.allow-headers: X-Requested-With, X-Auth-Token, Content-Type, Content-Length, Authorization, Access-Control-Allow-Headers, Accept, Access-Control-Allow-Methods, Access-Control-Allow-Origin, Access-Control-Allow-Credentials
http.cors.allow-methods: OPTIONS, HEAD, GET, POST, PUT, DELETE

So I added: Access-Control-Allow-Methods, Access-Control-Allow-Origin, Access-Control-Allow-Credentials.

Thanks everyone for helping me out, I post this answer so it might be used for future purposes. Feel free to further correct me.

Answer 2

Add both lines to the below file

/etc/nginx/sites-available/yours_conf_file

add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Headers' 'Content-Type';

and restart nginx server

sudo systemctl restart nginx