Access to XMLHttpRequest has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present (axios & flask restful)

Question

i need help for this error below

my project topology is python with flask restful as the backend that provide API and ReactJS with axios is the one that will consume the API. I've been added CORS in the python (flask restful) server as the shown below

sv.py

from flask import Flask, jsonify, request
from flask_restful import Resource, Api
from flask_cors import CORS
import pyodbc

connstring='DRIVER={ODBC Driver 17 for SQL Server};SERVER=DESKTOP-P8LCE56\SQLEXPRESS;DATABASE=invoicer;USERNAME=sa;PASSWORD=Pass1234;Trusted_Connection=yes;'

app = Flask(__name__)
api = Api(app)
CORS(app)
app.after_request
def after_request(response):
  response.headers.add('Access-Control-Allow-Origin', '*')
  response.headers.add('Access-Control-Allow-Headers', 'Content-Type,Authorization')
  response.headers.add('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS')
  return response

class GetData(Resource):
    def get(self):
       # SOME CODES...
    
    def post(self):
        # SOME CODES...
    
    def delete(self):
       # SOME CODES...

api.add_resource(GetData, '/')

if __name__ == '__main__':
    app.run(debug = True)

and this is in the React side. I'm doing POST with axios as the shown below

var config = { headers: {  
  'Content-Type': 'application/json',
  'Access-Control-Allow-Origin': '*'}
}
...some codes
axios.post("http://localhost:5000/", sendtodatabase,config)
        .then(function (response) {
          alert("DATA INSERTED SUCCESSFULLY");
        })
        .catch(function (error) {
          alert(error);
        });
...some codes

after i press button save button on react that will execute the axios POST the console will give me the error like at the first picture in this thread and at the python side it will give me this logs below

127.0.0.1 - - [30/Jan/2024 14:17:38] "OPTIONS / HTTP/1.1" 200 -
127.0.0.1 - - [30/Jan/2024 14:17:38] "POST / HTTP/1.1" 500 -
Traceback (most recent call last):
  File "C:\Users\asdhi\AppData\Local\Programs\Python\Python39\lib\site-packages\flask\app.py", line 1478, in __call__
    return self.wsgi_app(environ, start_response)
  File "C:\Users\asdhi\AppData\Local\Programs\Python\Python39\lib\site-packages\flask\app.py", line 1458, in wsgi_app
    response = self.handle_exception(e)
  File "C:\Users\asdhi\AppData\Local\Programs\Python\Python39\lib\site-packages\flask_cors\extension.py", line 176, in wrapped_function
    return cors_after_request(app.make_response(f(*args, **kwargs)))
  File "C:\Users\asdhi\AppData\Local\Programs\Python\Python39\lib\site-packages\flask_restful\__init__.py", line 298, in error_router
    return original_handler(e)
  File "C:\Users\asdhi\AppData\Local\Programs\Python\Python39\lib\site-packages\flask\app.py", line 1455, in wsgi_app
    response = self.full_dispatch_request()
  File "C:\Users\asdhi\AppData\Local\Programs\Python\Python39\lib\site-packages\flask\app.py", line 869, in full_dispatch_request
    rv = self.handle_user_exception(e)
  File "C:\Users\asdhi\AppData\Local\Programs\Python\Python39\lib\site-packages\flask_cors\extension.py", line 176, in wrapped_function
    return cors_after_request(app.make_response(f(*args, **kwargs)))
  File "C:\Users\asdhi\AppData\Local\Programs\Python\Python39\lib\site-packages\flask_restful\__init__.py", line 298, in error_router
    return original_handler(e)
  File "C:\Users\asdhi\AppData\Local\Programs\Python\Python39\lib\site-packages\flask\app.py", line 867, in full_dispatch_request
    rv = self.dispatch_request()
  File "C:\Users\asdhi\AppData\Local\Programs\Python\Python39\lib\site-packages\flask\app.py", line 852, in dispatch_request
    return self.ensure_sync(self.view_functions[rule.endpoint])(**view_args)
  File "C:\Users\asdhi\AppData\Local\Programs\Python\Python39\lib\site-packages\flask_restful\__init__.py", line 489, in wrapper
    resp = resource(*args, **kwargs)
  File "C:\Users\asdhi\AppData\Local\Programs\Python\Python39\lib\site-packages\flask\views.py", line 109, in view
    return current_app.ensure_sync(self.dispatch_request)(**kwargs)
  File "C:\Users\asdhi\AppData\Local\Programs\Python\Python39\lib\site-packages\flask_restful\__init__.py", line 604, in dispatch_request
    resp = meth(*args, **kwargs)
  File "C:\Users\asdhi\Downloads\Compressed\flask-rest-api-master\flask-rest-api-master\sv.py", line 128, in post
    cursor.execute("INSERT INTO Items (id,invoiceid,currency,itemdesc,quantity,unit,price,discount,freightprice,taxamount,downpayment) VALUES ('"+str(int(lastitemsid)+1)+"','"+str(int(lastinvoiceid)+1)+"','"+jsondata['items'][str(count)]['itemdesc']+"','"+jsondata['items'][str(count)]['quantity']+"','"+jsondata['items'][str(count)]['unit']+"','"+jsondata['items'][str(count)]['price']+"','"+jsondata['items'][str(count)]['discount']+"')")    
TypeError: list indices must be integers or slices, not str

I want the data that i'm passing from the React with axios handled properly without any CORS error at the python flask restful backend and it will be saved to sql server database.

Answer 1

I think i made a mistake for inserting my data to SQL server. this error below indicate something wrong in the server. In my case it's the query error. There is a typo when i type the column name. There is no corelation to the CORS itself.