Como resolver problemas 415 quando JavaScript envia solicitações AJAX POST para um backend Flask

Compreendendo as armadilhas das solicitações AJAX POST para um backend Flask

Ao construir um projeto web com front-end JavaScript e back-end Python Flask, a transmissão de dados pode rapidamente se tornar complicada, especialmente ao usar solicitações AJAX POST. Muitos desenvolvedores encontram problemas frustrantes, como o código de status 415, que indica um tipo de mídia não compatível, e têm dificuldade para identificar a causa raiz.

Esse problema geralmente ocorre quando a formatação de dados ou os cabeçalhos HTTP não se alinham com o que o back-end espera. O Cross-Origin Resource Sharing (CORS) também pode apresentar obstáculos adicionais quando o front-end e o back-end são hospedados em servidores separados, aumentando a confusão.

Nesse caso, uma equipe que trabalhava em um projeto econômico enfrentou exatamente esses desafios ao tentar passar dados JSON de seu front-end GitHub baseado em JavaScript para um servidor Flask hospedado em PythonAnywhere. Sua jornada destaca os principais desafios na configuração de cabeçalhos, na solução de problemas de CORS e no alinhamento da estrutura de dados para evitar o temido erro 415.

Se você estiver enfrentando dificuldades semelhantes, este artigo orientará você através de possíveis soluções, incluindo os cabeçalhos corretos a serem usados, como configurar o Flask para CORS e como estruturar corretamente suas solicitações AJAX. Ao final, você entenderá como corrigir esses problemas e fazer com que o front-end e o back-end se comuniquem perfeitamente.

Implementando solicitações JSON POST entre JavaScript e Flask

O JavaScript AJAX A função desempenha um papel crucial em nosso exemplo, enviando dados de forma assíncrona do front-end para o backend do Flask. Este método permite que os usuários enviem solicitações HTTP sem atualizar a página, tornando a aplicação web mais dinâmica. Para evitar o erro 415, o segredo é garantir que os dados enviados correspondam ao tipo de conteúdo esperado pelo servidor. Em nosso exemplo, o uso do contentType: 'aplicativo/json' header garante que o servidor Flask interprete os dados corretamente como JSON.

No backend, o Flask processa essas solicitações ouvindo a rota definida usando o @app.route() decorador. Este decorador vincula a rota a uma função, neste caso, rota_teste(). É importante usar o solicitação.is_json função para verificar se a solicitação recebida tem o formato JSON esperado. Se o formato for válido, o solicitação.get_json() O método extrai os dados para processamento posterior. A função Flask então retorna uma resposta JSON usando jsonificar(), completando o ciclo solicitação-resposta.

Manuseio CORS (Compartilhamento de recursos entre origens) é crítico quando o front-end e o back-end estão hospedados em plataformas diferentes. O frasco CORS() A função resolve esse problema permitindo solicitações de todas as origens. Isso evita bloqueios de segurança do navegador que, de outra forma, rejeitariam a comunicação entre GitHub Pages (front-end) e PythonAnywhere (back-end). Usando cabeçalhos de resposta no Flask, como 'Access-Control-Allow-Origin', garante que o navegador entenda quais origens são permitidas.

Finalmente, o uso de assíncrono/aguardar no exemplo da API Fetch garante que o código JavaScript aguarde uma resposta do servidor antes de continuar. Essa abordagem simplifica o tratamento de erros e garante que quaisquer problemas com a solicitação POST ou resposta do servidor sejam registrados adequadamente. Os testes unitários incluídos nos exemplos são essenciais para verificar se o código funciona conforme o esperado em diferentes ambientes, detectando erros no início do desenvolvimento. Seguindo essas práticas, os desenvolvedores podem criar aplicativos da web confiáveis ​​com troca de dados contínua entre o front-end e o back-end.

// 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);
        }
    });
}

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: 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()

// 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);
}

Otimizando a comunicação entre Frontend e Flask Backend com JSON

Um aspecto fundamental para resolver o problema Erro 415 ao trabalhar com JavaScript e Flask é entender como o back-end espera que os dados sejam formatados e como os navegadores aplicam as políticas CORS. JSON é o padrão para passar dados entre frontend e backend, e garantir a configuração correta em ambos os lados é essencial. Um aspecto frequentemente esquecido é como os cabeçalhos gostam Tipo de conteúdo precisa se alinhar com os dados reais que estão sendo enviados. Quando o JavaScript envia uma carga JSON, o back-end deve estar preparado para lê-la corretamente.

Outro desafio crítico vem das solicitações de comprovação. Os navegadores enviam essas solicitações OPTIONS antes de fazer solicitações POST de origem cruzada para verificar se o servidor aceita a solicitação recebida. Se o back-end do Flask não responder com os cabeçalhos corretos em resposta à solicitação de simulação, o navegador bloqueará a solicitação real. Configurando o Flask para retornar cabeçalhos como Access-Control-Allow-Origin e Access-Control-Allow-Methods para solicitações de comprovação é crucial para evitar tais problemas.

Também é importante observar que JSON não é o único tipo de dados que pode ser enviado por meio de solicitações POST. Os desenvolvedores podem usar Formulário de dados objetos se precisarem enviar arquivos ou campos de formulário, e configurar o back-end para aceitar formatos de dados JSON e multipartes pode aumentar a flexibilidade. Finalmente, testando o backend com ferramentas como Carteiro antes da integração com o front-end ajuda a identificar problemas antecipadamente. O teste unitário adequado, conforme discutido anteriormente, garante que cada parte do processo de comunicação funcione de maneira confiável em todos os ambientes.