Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'

Not sure why I’m getting this error when trying to allow CORS on my flask app. Here’s my server:

#library imports
from flask import Flask
from flask_cors import CORS, cross_origin

app = Flask(__name__)
CORS(app, resources={r"/*": {"origins": "*"}})
app.config['CORS_HEADERS'] = 'Content-Type'

@app.route('/img', methods=['POST'])
def image_upload():
    if not request.json:
        abort(400)
    print(request.json)
    return jsonify('working')

if __name__ == "__main__":
    app.run(host= "0.0.0.0", debug=True, port = 5000, threaded=True)
    print("Running dev server on port 5000")

Now on my frontend, when I attempt to make a POST request to /img, I get the error in the title. The full error is:

XMLHttpRequest cannot load http://0.0.0.0:5000/img. Response to preflight request doesn’t pass access control check: The value of the ‘Access-Control-Allow-Credentials’ header in the response is ‘’ which must be ‘true’ when the request’s credentials mode is ‘include’. Origin ‘http://localhost:8080’ is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

[Syntaf]

Update: Adding the following code works, is there a way to do this with flask-cors so I don’t need to ways of allowing cross-origin?

@app.after_request
def after_request(response):
  response.headers.add('Access-Control-Allow-Origin', 'http://localhost:8080')
  response.headers.add('Access-Control-Allow-Headers', 'Content-Type,Authorization')
  response.headers.add('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS')
  response.headers.add('Access-Control-Allow-Credentials', 'true')
  return response

[ghost]

@corydolphin I have the same error. I have built na application and If I test request using Postman or Insonia it works normally, the application receive the requests and store the data in the session / database, but if I try to make a request from a React application using Axios I receive an error and the application doesn’t receive any request or store data.

Error :

Failed to load 127.0.0.1:5000/logout : Response to preflight request doesn't pass access control check : The value of the ' Access-Control-Allow-Credentials ' header in the response is ' ' which must be ' true ' when the request's credentials mode is ' include '. Origin ' localhost:8080 ' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

Flask application config :

# Imports

from flask import Flask

from flask_cors import CORS

# Cors

config = {
  'ORIGINS': [
    'http://localhost:8080',  # React
    'http://127.0.0.1:8080',  # React
  ],

  'SECRET_KEY': '...'
}

# App

app = Flask('Test')

CORS(app, resources={ r'/*': {'origins': config['ORIGINS']}}, supports_credentials=True)

Request in React :

axios({
  method: 'post',
  url: `127.0.0.1:5000/logout`,
  headers: {Authorization: `Bearer ${this.state.login.access_token}`},
  withCredentials: true // True otherwise I receive another error
}).then(response => {
  console.log('Logout ', response);
})

I have also research but I don’t know how to solve this.

Obs ¹ : I’m using server side session (Flask Session)

Obs ² : The other error is a 500. It happens because I try to get something from session to make the logout, but the attribute is not found in session (if I make the request with the tool I mentioned, it works fine).