title: CORS fails to work once I add a JWT authorization header
body: <p>I have a Flask backend and a React front-end. The Flask backend is an API that will communicate with other microservices. In development I have my React front-end running on localhost:3000 and the Flask app running on localhost:5000.
  Clearly these are different ports which will throw a CORS error by default. So I added Flask_CORS and allowed traffic from localhost:3000. This works and I can now serve GET and POST requests.</p>
  
  <p>I then add my Firebase authentication to the front-end. I receive a JWT and then I want to send the JWT with ech API request to ensure that the user is allowed to make certain requests, which will be validated on the Flask backend.</p>
  
  <p>I added the token_id to the headers in the Axios request to my back-end, but now I am getting the following error:</p>
  
  <blockquote>
    <p>localhost/:1 Access to XMLHttpRequest at '<a href="http://localhost:5000/items" rel="nofollow noreferrer">http://localhost:5000/items</a>' from origin '<a href="http://localhost:3000" rel="nofollow noreferrer">http://localhost:3000</a>' 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.</p>
  </blockquote>
  
  <p>When I examine the network tab I notice that without the JWT the request passes through fine. See below for header content:</p>
  
  <ul>
  <li><p>General:</p>
  
  <ul>
  <li>Request URL: <a href="http://localhost:5000/items" rel="nofollow noreferrer">http://localhost:5000/items</a></li>
  <li>Request Method: GET</li>
  <li>Status Code: 200 OK</li>
  <li>Remote Address: 127.0.0.1:5000</li>
  <li>Referrer Policy: no-referrer-when-downgrade</li>
  </ul></li>
  <li><p>Response Headers:</p>
  
  <ul>
  <li><b>Access-Control-Allow-Origin: <a href="http://localhost:3000" rel="nofollow noreferrer">http://localhost:3000</a> </b> &lt;--This line is my concern</li>
  <li>Content-Length: 37</li>
  <li>Content-Type: application/json</li>
  <li>Date: Fri, 06 Sep 2019 09:10:10 GMT</li>
  <li>Server: Werkzeug/0.15.5 Python/3.7.4</li>
  <li>Vary: Origin</li>
  </ul></li>
  <li><p>Request Headers:</p>
  
  <ul>
  <li>Provisional headers are shown</li>
  <li>Accept: application/json, text/plain, <em>/</em></li>
  <li>Origin: <a href="http://localhost:3000" rel="nofollow noreferrer">http://localhost:3000</a></li>
  <li>Referer: <a href="http://localhost:3000/" rel="nofollow noreferrer">http://localhost:3000/</a></li>
  <li>Sec-Fetch-Mode: cors</li>
  <li>User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36</li>
  </ul></li>
  </ul>
  
  <p>I then only add the JWT to the Authorization header config of an Axios interceptor and now the request fails with the following headers present in the Network tab:</p>
  
  <ul>
  <li>General:
  
  <ul>
  <li>Request URL: <a href="http://localhost:5000/items" rel="nofollow noreferrer">http://localhost:5000/items</a></li>
  <li>Request Method: OPTIONS</li>
  <li>Status Code: 200 OK</li>
  <li>Remote Address: 127.0.0.1:5000</li>
  <li>Referrer Policy: no-referrer-when-downgrade</li>
  </ul></li>
  <li>Response Headers:
  
  <ul>
  <li>Allow: POST, OPTIONS, HEAD, GET</li>
  <li>Content-Length: 0</li>
  <li>Content-Type: text/html; charset=utf-8</li>
  <li>Date: Fri, 06 Sep 2019 09:14:46 GMT</li>
  <li>Server: Werkzeug/0.15.5 Python/3.7.4</li>
  </ul></li>
  <li>Request Headers:
  
  <ul>
  <li>Provisional headers are shown</li>
  <li>Access-Control-Request-Headers: authorization</li>
  <li>Access-Control-Request-Method: GET</li>
  <li>Origin: <a href="http://localhost:3000" rel="nofollow noreferrer">http://localhost:3000</a></li>
  <li>Referer: <a href="http://localhost:3000/" rel="nofollow noreferrer">http://localhost:3000/</a></li>
  <li>Sec-Fetch-Mode: no-cors</li>
  <li>User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36</li>
  </ul></li>
  </ul>
  
  <p>I noticed that the Access-Control-Allow-Origin disappears when the Authorization header is added and instead an Access-Control_Request-Headers is present. </p>
  
  <p>The code of interest in the front end is below</p>
  
  <pre><code>import axios from 'axios';
  import * as firebase from "firebase/app";
  import 'firebase/auth';
  
  const instance = axios.create({
      baseURL: 'http://localhost:5000/',
  });
  
  instance.interceptors.request.use(config =&gt; {
      const id_token = firebase.auth().currentUser.getIdToken();
      config.headers = { Authorization: id_token}; &lt;---Commenting out this line works
      return config
  }, error =&gt; {
      return Promise.reject(error);
  })
  export default instance;
  </code></pre>
  
  <p>I do not know how or why the CORS fails to work as soon as a JWT is added. I suspect it is because once the JWT is added there is a pre-flight request. But I have changed nothing on the server side so I am puzzled as to why the server would not provide a suitablelCORS response just because a JWT is added.</p>
  
  <p>Any pointers would be appreciated.</p>