PythonAnywhere部署Flask服务遇CORS问题及flask_cors引发500错误求助

问题背景 #

在PythonAnywhere部署Flask服务端脚本，初始代码请求返回200状态码，但前端触发CORS策略错误，提示缺少Access-Control-Allow-Origin头。安装flask_cors并配置CORS(app)后，本地服务器运行正常，但PythonAnywhere上返回500错误，页面加载失败。

原后端代码（初始版） #

from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/',methods=['GET','POST'])
def getdata():
    text = str(request.args.get("excel_file_name"))
    return text

原后端代码（添加flask_cors后） #

from flask import Flask,request
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/',methods=['GET','POST'])
def getdata():
    text = str(request.args.get("excel_file_name"))
    return text

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

原前端JS代码 #

document.getElementById("btn-submit").addEventListener("click",function(){
    var fd = new FormData();
    fd.append("excelfiles",document.getElementById("input_file").files[0]);
    sendexcel("fd")

});

function sendexcel(objet){
    var xml = new XMLHttpRequest();
    xml.open("POST","https://sifo13.pythonanywhere.com/",true);
    xml.onreadystatechange = function(){
        if(this.readyState = 4 && this.status ==200){
            var reponce = this.responseText;
            alert(reponce)
        }
    }
    xml.send("excel_file_name="+objet)
}

排查与修复步骤 #

1. 解决PythonAnywhere上的flask_cors依赖问题 #

PythonAnywhere的Flask应用运行在独立虚拟环境中，本地安装的依赖不会自动同步到服务器。需要手动安装：

• 登录PythonAnywhere控制台，进入对应项目的虚拟环境（默认虚拟环境名通常为myvirtualenv，执行命令：workon myvirtualenv）
• 执行安装命令：pip install flask-cors

2. 修正后端参数获取逻辑 #

原代码中，前端用POST请求，但后端通过request.args.get获取GET参数，参数传递方式不匹配。同时，当request.args.get("excel_file_name")为None时，str(None)会得到字符串"None"，建议添加默认值避免异常：

from flask import Flask, request
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/', methods=['GET', 'POST'])
def getdata():
    # 兼容GET和POST的参数获取方式
    if request.method == 'GET':
        text = request.args.get("excel_file_name", "")
    else:
        # POST表单参数用request.form获取
        text = request.form.get("excel_file_name", "")
    return text

# PythonAnywhere部署无需app.run，平台会自动通过WSGI入口启动服务

3. 修正前端请求逻辑 #

原前端代码存在两个问题：

• 传递给sendexcel的是字符串"fd"，而非实际的FormData对象
• 发送的参数格式错误，且未对文件名进行URL编码

修正方案1：仅传递文件名

document.getElementById("btn-submit").addEventListener("click", function(){
    var file = document.getElementById("input_file").files[0];
    if (!file) {
        alert("请选择文件");
        return;
    }
    sendexcel(file.name);
});

function sendexcel(fileName){
    var xml = new XMLHttpRequest();
    xml.open("POST", "https://sifo13.pythonanywhere.com/", true);
    xml.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xml.onreadystatechange = function(){
        if(this.readyState === 4){
            if(this.status === 200){
                alert(this.responseText);
            } else {
                alert("请求失败，状态码：" + this.status);
            }
        }
    }
    // 对文件名进行URL编码，避免特殊字符问题
    xml.send("excel_file_name=" + encodeURIComponent(fileName));
}

修正方案2：发送完整文件

如果需要上传文件，调整前端和后端代码：
前端代码

document.getElementById("btn-submit").addEventListener("click", function(){
    var fd = new FormData();
    var file = document.getElementById("input_file").files[0];
    if (!file) {
        alert("请选择文件");
        return;
    }
    fd.append("excelfiles", file);
    sendexcel(fd);
});

function sendexcel(formData){
    var xml = new XMLHttpRequest();
    xml.open("POST", "https://sifo13.pythonanywhere.com/", true);
    xml.onreadystatechange = function(){
        if(this.readyState === 4){
            if(this.status === 200){
                alert(this.responseText);
            } else {
                alert("请求失败，状态码：" + this.status);
            }
        }
    }
    // 发送FormData时无需手动设置Content-Type，浏览器会自动处理
    xml.send(formData);
}

后端代码

from flask import Flask, request
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/', methods=['POST'])
def upload_file():
    if 'excelfiles' not in request.files:
        return "未检测到上传文件"
    file = request.files['excelfiles']
    if file.filename == '':
        return "文件名不能为空"
    # 此处可添加文件保存或处理逻辑
    return f"成功接收文件：{file.filename}"

4. 查看PythonAnywhere错误日志 #

如果仍出现500错误，登录PythonAnywhere的Web界面，进入"Logs"选项卡查看具体错误信息，根据日志提示进一步排查（比如依赖缺失、代码语法错误等）。

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