Firefox插件中通过JQuery AJAX向Flask后端传输数据无响应问题求助

我编写了一个可下载YouTube视频的Python脚本，现在计划开发一款Firefox插件配合它，直接从浏览器触发视频下载。学习插件开发后了解到需要使用JavaScript，于是尝试用AJAX POST方法将数据传输到Flask后端，但请求始终无响应，调试后也没有任何返回结果。恳请帮忙排查问题。

相关代码 #

JavaScript代码（test.js） #

console.log("Loaded Successfully!");
function postData(jsdata) {
    $.ajax({
        type: "POST",
        url: "/receivedata",
        data: { "myData": jsdata },
        success: callbackFunc
    });
}
function callbackFunc(response) {
    console.log(response);
}
postData('Hello')
console.log("Sent data successfully");

Python Flask后端代码 #

import flask
import json
from flask import request

app = flask.Flask(__name__)

@app.route('/receivedata/', methods=["GET", "POST"])
def receivedata_():
    if request.method == "POST":
        print(request.form["myData"])
        Message = {"Message":"Hello World"}
        return Message

if __name__ == "__test__":
    app.run(debug=True)

manifest.json配置 #

{
    "manifest_version": 2,
    "name": "Test",
    "version": "1.0",
    "description": "Test Addon!",
    "content_scripts": [
        {
            "matches": ["*://*.youtube.com/watch?*"],
            "js": ["test.js"]
        }
    ],
    "permissions": [
        "*://youtube.com/*"
    ]
}

问题排查与解决方案 #

我帮你梳理了几个关键问题，按顺序修复后应该能解决无响应的问题：

1. Flask服务未正确启动 #

你的Flask代码里启动入口写错了：

if __name__ == "__test__":

应该改为：

if __name__ == "__main__":

这个错误会导致Flask服务根本无法启动，自然接收不到任何请求。

2. 跨域请求与目标地址错误 #

内容脚本运行在YouTube页面的上下文环境中，直接请求/receivedata会把请求发送到YouTube的服务器，而不是你的本地Flask服务。

• 修正JS中的请求URL为Flask服务的完整地址：

  url: "http://localhost:5000/receivedata/",
  

• 在manifest.json的permissions中添加本地服务的访问权限：

  "permissions": [
      "*://youtube.com/*",
      "http://localhost:5000/*"
  ]
  

3. 缺少jQuery依赖 #

你的JS代码使用了$.ajax，但没有在扩展中引入jQuery库，会导致控制台报错$ is not defined。

• 下载jQuery的压缩版（比如jquery.min.js）放到扩展的目录中；
• 修改manifest.json的content_scripts，先加载jQuery再加载你的脚本：

  "js": ["jquery.min.js", "test.js"]
  

4. Flask返回响应格式错误 #

当前Flask直接返回字典，虽然Flask会自动处理，但更规范的做法是使用jsonify返回标准JSON响应，避免解析问题：

from flask import request, jsonify  # 新增jsonify导入

@app.route('/receivedata/', methods=["GET", "POST"])
def receivedata_():
    if request.method == "POST":
        print(request.form["myData"])
        Message = {"Message":"Hello World"}
        return jsonify(Message)  # 用jsonify返回

5. 路由斜杠不一致 #

Flask的路由是/receivedata/（带末尾斜杠），而原JS请求的是/receivedata（不带斜杠），虽然Flask会自动重定向，但POST请求重定向可能导致异常，统一两者的路径格式即可。

调试建议 #

修复后，打开Firefox开发者工具（F12）：

• 查看控制台是否还有报错；
• 切换到网络面板，查看POST请求的状态码、请求地址和响应内容，确认请求是否发送到了正确的服务器。

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