title: cors: strict-origin-when-cross-origin: react + nginx + elasticsearch
body: <p>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.</p>
  <p>My set up:</p>
  <p>I have the react app, using axios, making the following get request:</p>
  <pre><code>const authorization = process.env.REACT_APP_ELASTICSEARCH_AUTHORIZATION;
  
  const header = {
  'Authorization': authorization,
  
  
  }
  
  axios.get(`${path}/${searchIndex}/_search`,
              {headers: header}
  </code></pre>
  <p>The request is then send to my proxy server running nginx.</p>
  <p>The setting there are the following:</p>
  <pre><code>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; 
  }
  </code></pre>
  <p>On the elasticsearch server I have the following CORS settings:</p>
  <pre><code>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
  </code></pre>
  <p>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.</p>
  <p>From <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors</a> I understand:</p>
  <blockquote>
  <p>strict-origin-when-cross-origin (default)</p>
  </blockquote>
  <blockquote>
  <p>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).</p>
  </blockquote>
  <p>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.</p>
  <p>EDIT:</p>
  <p>included screenshots now as well:</p>
  <p><a href="https://i.stack.imgur.com/dKAf7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dKAf7.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/vOQi9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vOQi9.png" alt="enter image description here" /></a></p>