如何解决 JavaScript 向 Flask 后端发送 AJAX POST 请求时的 415 问题

解决在 Flask 后端使用 AJAX 请求时出现的 415 错误

该解决方案前端使用 JavaScript 与 jQuery 相结合，后端使用 Flask，重点关注正确的数据传输、处理 CORS 和 JSON 解析。

// JavaScript: AJAX request sending JSON data to Flask
function sendData() {
    $.ajax({
        type: 'POST',
        url: 'http://127.0.0.1:5000/testRoute',
        contentType: 'application/json',
        data: JSON.stringify({ 'hello': 'world' }),
        success: function (response) {
            console.log('Success:', response);
        },
        error: function (error) {
            console.log('Error:', error);
        }
    });
}

使用 Flask 处理 JSON 数据并避免 415 错误

此示例设置 Flask 路由以通过配置响应标头来正确解析 JSON 并处理跨域请求 (CORS)。

from flask import Flask, jsonify, request
from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # Enable CORS for all routes

@app.route("/testRoute", methods=["POST"])
def test_route():
    if request.is_json:
        data = request.get_json()
        print(data)  # Log received JSON
        return jsonify({"message": "JSON received!"}), 200
    else:
        return jsonify({"error": "Unsupported Media Type"}), 415

if __name__ == "__main__":
    app.run(debug=True, host="127.0.0.1", port=5000)

添加单元测试以确保代码在不同环境中运行

单元测试确保后端Flask路由和前端AJAX功能在不同场景下都能正确运行。

# Flask: Unit tests for the backend route
import unittest
from app import app

class FlaskTest(unittest.TestCase):
    def setUp(self):
        self.app = app.test_client()
        self.app.testing = True

    def test_post_json(self):
        response = self.app.post('/testRoute',
                               json={"hello": "world"})
        self.assertEqual(response.status_code, 200)
        self.assertIn(b'JSON received!', response.data)

if __name__ == "__main__":
    unittest.main()

替代解决方案：使用 Fetch API 而不是 AJAX

此示例演示如何使用 Fetch API 进行 POST 请求，这是 AJAX 的现代替代方案。

// JavaScript: Using Fetch API to send JSON to Flask
async function sendData() {
    const response = await fetch('http://127.0.0.1:5000/testRoute', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ 'hello': 'world' })
    });
    const data = await response.json();
    console.log('Response:', data);
}

有关从 JavaScript 向 Flask 发送 POST 请求的常见问题

1. 如何解决 415 不支持的媒体类型错误？
2. 确保 Content-Type 标头与正在发送的数据匹配。如果您要发送 JSON，请设置 Content-Type 到 'application/json'。
3. 为什么我在使用 Flask 时遇到 CORS 错误？
4. 当前端和后端位于不同域时，就会出现 CORS 错误。使用 Flask-CORS 图书馆或集 Access-Control-Allow-Origin 允许跨源请求的标头。
5. 预检请求是什么意思？
6. 预检请求是 OPTIONS 浏览器发送请求来检查服务器是否接受主请求。确保您的后端正确处理 OPTIONS 请求。
7. 我可以通过 POST 请求发送非 JSON 数据吗？
8. 是的，您可以使用 FormData 发送文件或表单字段的对象。确保后端可以解析 JSON 和多部分数据类型。
9. 如何在没有前端的情况下测试 Flask 后端？
10. 使用类似的工具 Postman 或者 curl 将请求直接发送到 Flask 后端，让您更轻松地进行调试。
11. 我是否需要 AJAX，或者可以使用 Fetch API 代替吗？
12. Fetch API 是一个现代的替代品 $.ajax() 并提供了一种更简洁的方式来处理 JavaScript 中的 HTTP 请求。
13. 如何在 Flask 中验证 JSON 数据？
14. 使用 request.get_json() 解析传入数据，并检查必填字段以确保请求包含预期信息。
15. 如果我的 Flask 路由没有响应，我该怎么办？
16. 检查 @app.route() 装饰器以确保正确定义 URL 和 HTTP 方法。
17. 如何处理 JavaScript POST 请求中的错误？
18. 使用 error 回调中 $.ajax() 或者 .catch() 使用 Fetch API 来记录和处理任何请求失败。
19. 如何保护前端和后端之间的 POST 请求？
20. 使用 HTTPS，验证前端和后端的输入，并应用适当的身份验证/授权机制。

结束 AJAX POST 请求故障排除过程

使用 AJAX 或 Fetch 将数据从 JavaScript 发送到 Flask 后端需要正确配置标头并处理 CORS。确保内容类型与数据格式匹配可以防止 415 错误。 Flask 管理路线和飞行前请求的能力对于平稳的数据交换起着至关重要的作用。

使用 Postman 等工具独立测试后端可以帮助及早发现问题。采用验证输入和使用 HTTPS 等最佳实践，进一步确保数据传输的安全。遵循这些准则将使您的前端和 Flask 后端之间能够更好地通信，即使托管在不同的平台上也是如此。