Python Flask experiencing strange CORS quirks

Question

Python Flask experiencing strange CORS quirks

My personal website hosted locally at cocostraws.com requires CORS to function properly. I have added the necessary CORS headers for each API link in my Python code.

https://i.sstatic.net/ctysO.png

You can examine the complete files app.py and index.js. This code used to function flawlessly months ago, but now that I've brought it back online, a CORS issue has surfaced. Strangely, if I leave the loaded website idle for some time (around 15 minutes perhaps) and return later, the CORS problem disappears. This erratic behavior is frustrating me as I cannot pinpoint the exact cause. I have exhausted all possible solutions I could think of. Any assistance would be greatly appreciated.

PS: When I switched to using Firefox, the CORS problem vanished. Can anyone shed light on this mystery?

javascript flask cors

Answer 1

Answer №1

Chrome and Firefox seem to have different interpretations of the HTTP preflight request (Method OPTIONS).

Instead of using wildcard stars '*', it is recommended to use explicit values like:

response.headers.add('Access-Control-Allow-Origin', request.headers.origin);
response.headers.add('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
response.headers.add('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE');

In most cases, the value '*' serves as a special wildcard for requests that do not include credentials (requests without HTTP cookies or authentication information).

Refer to Access-Control-Allow-Origin, Access-Control-Allow-Headers, Access-Control-Allow-Methods, etc.

Answer 2

Chrome and Firefox seem to have different interpretations of the HTTP preflight request (Method OPTIONS).

Instead of using wildcard stars '*', it is recommended to use explicit values like:

response.headers.add('Access-Control-Allow-Origin', request.headers.origin);
response.headers.add('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
response.headers.add('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE');

In most cases, the value '*' serves as a special wildcard for requests that do not include credentials (requests without HTTP cookies or authentication information).

Refer to Access-Control-Allow-Origin, Access-Control-Allow-Headers, Access-Control-Allow-Methods, etc.

Python Flask experiencing strange CORS quirks

Answer №1

Similar questions

Store data in LocalStorage according to the selected value in the dropdown menu

Guidance on calling a JavaScript function from a dynamically added control

Formulate a multi-line string using a collection in React's JavaScript framework

Is there a way to execute one function before another in JavaScript?

interacting with elements using touch and mouse events in an HTML document

The middleware in Express.js is failing to execute the next function

Sending JSON data from AngularJS to Laravel Controller through POST request

PHP Calculator - Displaying results in both the webpage and an Ajax popup for enhanced user experience

Steps for creating a duplicate of a chosen item in a dropdown menu

After installing the latest version of [email protected], I encountered an error stating "Module 'webpack/lib/node/NodeTemplatePlugin' cannot be found."

Currently focused on developing vertical sliders that can be manipulated by dragging them up or down independently

Is there a way to efficiently update multiple rows at once in MySQL using an array in Node.js?

Utilize the power of REACT JS to transform a specific segment within a paragraph into a hyperlink. Take advantage of the click event on that hyperlink to execute an API request prior to

Transforming mmddyyyy date format to mm/dd/yyyy using Node.js

Restoring information chart

Deleting items based on identification

Retrieve the designated element from an array of JSON data in SPLUNK

Here's a clever way to utilize Array.map to display two separate React elements without relying on React Fragments

Accessing the current state outside of a component using React Context

I am facing an issue where the table in my Laravel Vue component is not displaying the data from