CORS issue

[SnowPatrolXV]

Hi,

I am developing a web app with a frontend in react (http://localhost:5173/) and a backend in Flask (http://localhost:5000/).

The simple requests (GET, POST and OPTIONS) work perfectly. But, the complex requests (PUT and DELETE) are refused by the backend (405 - METHOD NOT ALLOWED).

the Flask-CORS logging is enable and in the the trace of the backend, the OPTIONS request and the PUT request.

127.0.0.1 - - [27/Mar/2024 17:03:03] "OPTIONS /measures HTTP/1.1" 200 -
Request to '/measures' matches CORS resource '/*'. Using options: {'origins': ['http://127.0.0.1:5173', 'http://localhost:5173'], 'methods': 'DELETE, GET, OPTIONS, POST, PUT', 'allow_headers': ['Authorization', 'Content-Type'], 'expose_headers': None, 'supports_credentials': True, 'max_age': None, 'send_wildcard': False, 'automatic_options': True, 'vary_header': True, 'resources': {'/*': {'origins': ['http://127.0.0.1:5173', 'http://localhost:5173'], 'methods': ['OPTIONS', 'GET', 'POST', 'PUT', 'DELETE'], 'allow_headers': ['Authorization', 'Content-Type'], 'supports_credentials': True}}, 'intercept_exceptions': True, 'always_send': True}
CORS request received with 'Origin' http://localhost:5173
The request's Origin header matches. Sending CORS headers.
Settings CORS headers: MultiDict([('Access-Control-Allow-Origin', 'http://localhost:5173'), ('Access-Control-Allow-Credentials', 'true'), ('Vary', 'Origin')])
CORS have been already evaluated, skipping
127.0.0.1 - - [27/Mar/2024 17:03:03] "PUT /measures HTTP/1.1" 405 -

On the backend side, the Flask-CORS is enable with this code :

api_cors_config = {
	"origins": ["http://127.0.0.1:5173", "http://localhost:5173"],
	"methods": ["OPTIONS", "GET", "POST", "PUT", "DELETE"],
	"allow_headers": ["Authorization", "Content-Type"],
	"supports_credentials": True,
}
CORS(app,resources={r'/*': api_cors_config})

The function which process the PUT request

@measures_bp.route("/<measure_id>", methods=["PUT"])
@cross_origin()
def update_measure(measure_id):
    existing_measure = Measure.query.get(measure_id)
    existing_measure.name = request.json['name']
    existing_measure.coverage = request.json['coverage']
    db.session.commit()

    response = Response(status=204)
    return response

On the frontend, the request is sent by this code

fetch('http://127.0.0.1:5000/measures',
{
  mode: 'cors',
  method: 'PUT',
  headers: {
    'Content-type': 'application/json',
    'Origin' : 'http://localhost:5173',
    'Access-Control-Request-Method' : 'PUT',
    'Access-Control-Request-Headers' : 'Authorization, Content-Type',
  },
  body: JSON.stringify({
    measure_id: item.id,
    name: row.name,
    maturity_id : null,
    coverage: row.coverage
  }),
})

From my understanding, the issue comes from the Options request. The Allow header of the response does not have the PUT and DELETE METHOD.
Access-Control-Allow-Headers: content-type
Access-Control-Allow-Methods: DELETE, GET, HEAD, OPTIONS, PATCH, POST, PUT
Access-Control-Allow-Origin: http://localhost:5173
Allow: HEAD, GET, POST, OPTIONS

In the documentation, I do not see how to overide or config the Allow header.

Have-you an idea how to fix this issue ?

[pedromorgan]

Its a server error 405 = METHOD NOT ALLOWED

so in flask.. and url endpoint not accept request.
Its not really a CORS issue as that works, its the "HTTP" method

eg

@bp.route('/store/<int:store_id>', methods=('GET',"POST", ))
def store(store_id):
  // stufff

  return data

@bp.route('/store/<int:store_id>', methods=('DELETE", ))
def store(store_id):
 
  return "Deleting everything.. please wait"

[RBZAHEER]

🔍 Root of the Problem
You're making a PUT request to:

arduino
http://127.0.0.1:5000/measures
But your Flask route for PUT is:

python
@measures_bp.route("/<measure_id>", methods=["PUT"])
def update_measure(measure_id):
This route requires a measure_id as a URL parameter (e.g., /measures/123), but your frontend is sending a request to just /measures.

Hence:
CORS passes
Flask checks routes
Finds no PUT /measures route
Returns 405

✅ Solution
You need to update the frontend fetch call to include the measure_id in the URL like this:

fetch(http://127.0.0.1:5000/measures/${item.id}, {
mode: 'cors',
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: row.name,
maturity_id: null,
coverage: row.coverage
}),
});

📝 Notes:
You don't need to manually set Origin, Access-Control-Request-Method, or Access-Control-Request-Headers in fetch. The browser does that automatically in preflight.

Only include Authorization in headers if you're using it. Otherwise, remove it.