Ad

CORS Fails To Work Once I Add A JWT Authorization Header

- 1 answer

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.

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.

I added the token_id to the headers in the Axios request to my back-end, but now I am getting the following error:

localhost/:1 Access to XMLHttpRequest at 'http://localhost:5000/items' from origin 'http://localhost:3000' 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.

When I examine the network tab I notice that without the JWT the request passes through fine. See below for header content:

  • General:

    • Request URL: http://localhost:5000/items
    • Request Method: GET
    • Status Code: 200 OK
    • Remote Address: 127.0.0.1:5000
    • Referrer Policy: no-referrer-when-downgrade
  • Response Headers:

    • Access-Control-Allow-Origin: http://localhost:3000 <--This line is my concern
    • Content-Length: 37
    • Content-Type: application/json
    • Date: Fri, 06 Sep 2019 09:10:10 GMT
    • Server: Werkzeug/0.15.5 Python/3.7.4
    • Vary: Origin
  • Request Headers:

    • Provisional headers are shown
    • Accept: application/json, text/plain, /
    • Origin: http://localhost:3000
    • Referer: http://localhost:3000/
    • Sec-Fetch-Mode: cors
    • 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

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:

  • General:
    • Request URL: http://localhost:5000/items
    • Request Method: OPTIONS
    • Status Code: 200 OK
    • Remote Address: 127.0.0.1:5000
    • Referrer Policy: no-referrer-when-downgrade
  • Response Headers:
    • Allow: POST, OPTIONS, HEAD, GET
    • Content-Length: 0
    • Content-Type: text/html; charset=utf-8
    • Date: Fri, 06 Sep 2019 09:14:46 GMT
    • Server: Werkzeug/0.15.5 Python/3.7.4
  • Request Headers:
    • Provisional headers are shown
    • Access-Control-Request-Headers: authorization
    • Access-Control-Request-Method: GET
    • Origin: http://localhost:3000
    • Referer: http://localhost:3000/
    • Sec-Fetch-Mode: no-cors
    • 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

I noticed that the Access-Control-Allow-Origin disappears when the Authorization header is added and instead an Access-Control_Request-Headers is present.

The code of interest in the front end is below

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 => {
    const id_token = firebase.auth().currentUser.getIdToken();
    config.headers = { Authorization: id_token}; <---Commenting out this line works
    return config
}, error => {
    return Promise.reject(error);
})
export default instance;

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.

Any pointers would be appreciated.

Ad

Answer

You can define CORS at the top of the main file, it will allow all the CORS requests

from flask import Flask
from flask_cors import CORS, cross_origin

app = Flask(__name__)
CORS(app)

@app.route("/api/test")
def test_cors():
  return "CORS allowed"
Ad
source: stackoverflow.com
Ad