Compreendendo os erros CORS no jQuery, mas não no Postman

Compreendendo os erros CORS no jQuery, mas não no Postman
Arthur Petit
Quinta-feira, 4 de julho de 2024 às 10:01:01
JavaScript

Por que ocorrem erros de CORS em navegadores?

Ao trabalhar com JavaScript para se conectar a uma API RESTful, você pode encontrar um erro "Nenhum cabeçalho 'Access-Control-Allow-Origin' está presente no recurso solicitado". Esse erro geralmente ocorre devido à Política de Mesma Origem do navegador, que restringe as páginas da web de fazer solicitações para um domínio diferente daquele que serviu a página da web.

Curiosamente, quando a mesma solicitação é feita através de ferramentas como o Postman, esse erro não ocorre. Essa diferença pode ser desconcertante para os desenvolvedores. Entender por que as chamadas XMLHttpRequest ou fetch são bloqueadas pelo CORS no navegador, mas não no Postman, é crucial para solucionar problemas e desenvolver aplicativos da web seguros.

Resolvendo problemas de CORS em JavaScript com Flask Backend

Código front-end JavaScript usando jQuery

// JavaScript (jQuery) frontend script
$(document).ready(function() {
  $("#loginButton").click(function() {
    $.ajax({
      type: 'POST',
      dataType: 'json',
      url: 'http://localhost:5000/login',
      data: JSON.stringify({
        username: 'user',
        password: 'pass'
      }),
      contentType: 'application/json',
      crossDomain: true,
      xhrFields: {
        withCredentials: true
      }
    }).done(function(data) {
      console.log('Login successful');
    }).fail(function(xhr, textStatus, errorThrown) {
      alert('Error: ' + xhr.responseText);
    });
  });
});

Configurando CORS no Flask

Código de back-end Python usando Flask

# Python (Flask) backend script
from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app, supports_credentials=True)

@app.route('/login', methods=['POST'])
def login():
    data = request.get_json()
    username = data.get('username')
    password = data.get('password')

    if username == 'user' and password == 'pass':
        return jsonify({'message': 'Login successful'}), 200
    else:
        return jsonify({'message': 'Invalid credentials'}), 401

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)

Resolvendo problemas de CORS em JavaScript com Flask Backend

Código front-end JavaScript usando jQuery

// JavaScript (jQuery) frontend script
$(document).ready(function() {
  $("#loginButton").click(function() {
    $.ajax({
      type: 'POST',
      dataType: 'json',
      url: 'http://localhost:5000/login',
      data: JSON.stringify({
        username: 'user',
        password: 'pass'
      }),
      contentType: 'application/json',
      crossDomain: true,
      xhrFields: {
        withCredentials: true
      }
    }).done(function(data) {
      console.log('Login successful');
    }).fail(function(xhr, textStatus, errorThrown) {
      alert('Error: ' + xhr.responseText);
    });
  });
});

Configurando CORS no Flask

Código de back-end Python usando Flask

# Python (Flask) backend script
from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app, supports_credentials=True)

@app.route('/login', methods=['POST'])
def login():
    data = request.get_json()
    username = data.get('username')
    password = data.get('password')

    if username == 'user' and password == 'pass':
        return jsonify({'message': 'Login successful'}), 200
    else:
        return jsonify({'message': 'Invalid credentials'}), 401

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)

Por que ocorrem problemas de CORS em navegadores e não no Postman

Um aspecto crucial para entender sobre o Cross-Origin Resource Sharing (CORS) é o mecanismo de segurança que os navegadores implementam para proteger os usuários. Os navegadores aplicam a Política de Mesma Origem, que impede que páginas da web façam solicitações para um domínio diferente daquele que serviu a página da web. Esta é uma medida de segurança para evitar que sites maliciosos acessem informações confidenciais de outros sites através de JavaScript. Quando você faz uma solicitação XMLHttpRequest ou de busca de um navegador, ele verifica o 'Access-Control-Allow-Origin' cabeçalho na resposta do servidor. Se este cabeçalho não estiver presente ou não permitir a origem solicitante, o navegador bloqueará a solicitação, resultando em um erro de CORS.

O Postman, por outro lado, não é um navegador, mas uma ferramenta para testar APIs. Ele não impõe a Política de Mesma Origem porque não está em execução no ambiente do navegador. Portanto, ele não realiza as mesmas verificações de segurança e permite que solicitações sejam feitas a qualquer domínio sem restrições. É por isso que você não encontra problemas de CORS ao usar o Postman para fazer a mesma solicitação. Compreender essa diferença é crucial para que os desenvolvedores solucionem e resolvam problemas relacionados ao CORS de maneira eficaz. Ao configurar o servidor para incluir os cabeçalhos CORS apropriados, você pode garantir que seu aplicativo Web possa se comunicar com APIs externas de forma segura e sem erros.

Perguntas e respostas comuns sobre CORS e JavaScript

  1. O que é CORS?
  2. CORS significa Cross-Origin Resource Sharing, um mecanismo que permite que recursos restritos em uma página da web sejam solicitados de outro domínio fora do domínio de origem do recurso.
  3. Por que os navegadores aplicam a Política de Mesma Origem?
  4. A Política de Mesma Origem é aplicada para proteger os dados dos usuários e evitar que sites maliciosos acessem informações confidenciais de outros domínios por meio de JavaScript.
  5. Por que o Postman não aplica o CORS?
  6. O Postman não impõe o CORS porque não é um navegador e não é executado em um ambiente de navegador, portanto, não precisa aderir à Política de Mesma Origem.
  7. Como posso resolver um erro de CORS em meu aplicativo da web?
  8. Para resolver um erro CORS, configure o servidor para incluir o apropriado 'Access-Control-Allow-Origin' cabeçalho na resposta, permitindo a origem solicitante.
  9. O que faz o 'Access-Control-Allow-Origin' cabeçalho faz?
  10. O 'Access-Control-Allow-Origin' O cabeçalho especifica quais origens têm permissão para acessar o recurso, permitindo solicitações de origem cruzada.
  11. Qual é o propósito withCredentials em XMLHttpRequest?
  12. O withCredentials propriedade indica se as solicitações de controle de acesso entre sites devem ou não ser feitas usando credenciais como cookies ou cabeçalhos de autorização.
  13. Por que recebo um erro CORS mesmo que meu servidor inclua o 'Access-Control-Allow-Origin' cabeçalho?
  14. Você ainda poderá receber um erro CORS se outros cabeçalhos CORS necessários, como 'Access-Control-Allow-Methods' ou 'Access-Control-Allow-Headers', estão ausentes ou configurados incorretamente.
  15. Posso desativar o CORS no meu navegador?
  16. Desativar o CORS em um navegador não é recomendado, pois compromete a segurança. Em vez disso, configure seu servidor para lidar com o CORS corretamente.
  17. O que é uma solicitação de comprovação no CORS?
  18. Uma solicitação de simulação é uma solicitação inicial feita pelo navegador usando o método OPTIONS para determinar se a solicitação real é segura para envio. Ele verifica os cabeçalhos CORS necessários no servidor.

Concluindo a discussão

Compreender as nuances do CORS e da Política de Mesma Origem é essencial para desenvolvedores web. Embora os navegadores imponham medidas de segurança rígidas para proteger os usuários, ferramentas como o Postman contornam essas restrições, facilitando o teste de APIs. Ao configurar adequadamente o back-end com os cabeçalhos CORS necessários, os desenvolvedores podem garantir uma comunicação tranquila e segura entre o front-end e o back-end. Abordar questões de CORS é crucial para a criação de aplicações web funcionais e fáceis de usar.