Flask-RESTful+React/Axios跨域及SQL插入错误求助

一、先解决CORS跨域报错问题 #

你的当前配置存在两处关键问题：

1. after_request钩子未正确注册：代码里app.after_request后缺少括号，正确写法是@app.after_request（装饰器语法）或app.after_request(after_request)，否则自定义的CORS响应头不会被添加到请求中。
2. 前端无需设置Access-Control-Allow-Origin请求头：这个头是后端返回的响应头，前端请求中添加它完全无效，需要从Axios配置里删除。

修正后后端CORS相关代码 #

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)
# 启用flask-cors，已覆盖基础CORS需求，配合正确注册的after_request增强配置
CORS(app)

# 用装饰器正确注册after_request钩子
@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

# 其余代码保持不变

修正后前端Axios请求代码 #

// 移除无用的Access-Control-Allow-Origin请求头
var config = { headers: {  
  'Content-Type': 'application/json'
} }
...
axios.post("http://localhost:5000/", sendtodatabase, config)
        .then(function (response) {
          alert("DATA INSERTED SUCCESSFULLY");
        })
        .catch(function (error) {
          console.error(error); // 用控制台打印详细错误，比alert更便于调试
        });
...

二、解决POST请求500的索引错误（TypeError: list indices must be integers or slices, not str） #

这个错误说明你在GetData类的post方法中把列表当作字典使用字符串索引，常见场景：

• 前端传的是数组，但你用data['字段名']的方式访问；
• 后端处理数据时，误将某个列表变量当作字典去取键值。

示例修正（假设前端传单个JSON对象） #

如果前端sendtodatabase是单个对象（如{invoice_no: "INV001", amount: 1000}），后端post方法可按如下方式处理：

def post(self):
    try:
        # 获取前端JSON数据，确保是字典类型
        data = request.get_json()
        if not isinstance(data, dict):
            return jsonify({"error": "请求数据必须为JSON对象"}), 400
        
        # 提取字段，注意和前端传的键名一致
        invoice_no = data.get('invoice_no')
        amount = data.get('amount')
        
        # 数据库插入：用参数化查询，避免SQL注入和索引错误
        conn = pyodbc.connect(connstring)
        cursor = conn.cursor()
        cursor.execute("INSERT INTO invoices (invoice_no, amount) VALUES (?, ?)", (invoice_no, amount))
        conn.commit()
        conn.close()
        
        return jsonify({"message": "数据插入成功"}), 201
    except Exception as e:
        # 打印错误到后端控制台，方便定位问题
        print(f"插入失败：{str(e)}")
        return jsonify({"error": str(e)}), 500

关键注意事项 #

• 获取请求数据后先判断类型，确保和前端传参格式匹配；
• 必须使用参数化查询：避免直接拼接SQL语句，既防止注入风险，也规避字符串索引或格式错误；
• 捕获异常并返回明确错误信息，便于前后端调试。

验证步骤 #

1. 重启Flask后端，确保修正后的代码生效；
2. 前端触发请求时，打开浏览器开发者工具的「网络」标签，检查POST请求的响应头是否包含Access-Control-Allow-Origin: *；
3. 若仍有错误，查看后端控制台的详细报错，定位具体的索引错误位置。

内容的提问来源于stack exchange，提问作者kucingcat