Zrozumienie błędów CORS w jQuery, ale nie w Postmanie

Arthur Petit

Czwartek, 4 lipca 2024 09:59:45

Dlaczego w przeglądarkach pojawiają się błędy CORS?

Podczas pracy z JavaScriptem w celu łączenia się z interfejsem API RESTful może wystąpić błąd „W żądanym zasobie nie ma nagłówka „Access-Control-Allow-Origin”. Ten błąd często występuje w związku z polityką tego samego pochodzenia przeglądarki, która uniemożliwia stronom internetowym wysyłanie żądań do innej domeny niż ta, która obsługiwała tę stronę.

Co ciekawe, gdy to samo żądanie jest wysyłane za pomocą narzędzi takich jak Postman, taki błąd nie występuje. Ta różnica może być kłopotliwa dla programistów. Zrozumienie, dlaczego wywołania XMLHttpRequest lub fetch są blokowane przez CORS w przeglądarce, ale nie w Postmanie, ma kluczowe znaczenie dla rozwiązywania problemów i tworzenia bezpiecznych aplikacji internetowych.

Rozwiązywanie problemów CORS w JavaScript za pomocą zaplecza Flask

Kod JavaScript Frontend przy użyciu 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);
    });
  });
});

Konfigurowanie CORS w kolbie

Kod backendu Pythona przy użyciu Flaska

# 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)

Rozwiązywanie problemów CORS w JavaScript za pomocą zaplecza Flask

Kod JavaScript Frontend przy użyciu 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);
    });
  });
});

Konfigurowanie CORS w kolbie

Kod backendu Pythona przy użyciu Flaska

# 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)

Dlaczego problemy z CORS występują w przeglądarkach, a nie w Postmanie

Jednym z kluczowych aspektów, które należy zrozumieć na temat udostępniania zasobów między źródłami (CORS), jest mechanizm bezpieczeństwa wdrażany przez przeglądarki w celu ochrony użytkowników. Przeglądarki wymuszają zasadę Same-Origin, która uniemożliwia stronom internetowym wysyłanie żądań do innej domeny niż ta, która obsługiwała tę stronę. Jest to środek bezpieczeństwa uniemożliwiający złośliwym stronom internetowym dostęp do poufnych informacji znajdujących się na innych stronach internetowych za pośrednictwem JavaScript. Kiedy wysyłasz żądanie XMLHttpRequest lub pobieranie z przeglądarki, sprawdza ona, czy nie ma pliku 'Access-Control-Allow-Origin' nagłówek w odpowiedzi z serwera. Jeśli ten nagłówek nie jest obecny lub nie pozwala na źródło żądania, przeglądarka zablokuje żądanie, co spowoduje błąd CORS.

Postman z kolei nie jest przeglądarką, a narzędziem do testowania API. Nie wymusza zasady tego samego pochodzenia, ponieważ nie działa w środowisku przeglądarki. Dlatego nie przeprowadza takich samych kontroli bezpieczeństwa i umożliwia wysyłanie żądań do dowolnej domeny bez ograniczeń. Właśnie dlatego nie napotykasz problemów z CORS, gdy używasz Postmana do wysyłania tego samego żądania. Zrozumienie tej różnicy ma kluczowe znaczenie dla programistów, aby mogli skutecznie rozwiązywać problemy związane z CORS. Konfigurując serwer tak, aby zawierał odpowiednie nagłówki CORS, możesz mieć pewność, że Twoja aplikacja internetowa będzie mogła komunikować się z zewnętrznymi interfejsami API w sposób bezpieczny i bez błędów.

Często zadawane pytania i odpowiedzi dotyczące CORS i JavaScript

Co to jest CORS?
CORS oznacza Cross-Origin Resource Sharing, mechanizm umożliwiający żądanie ograniczonych zasobów strony internetowej z innej domeny spoza domeny, z której dany zasób pochodzi.
Dlaczego przeglądarki wymuszają zasady tego samego pochodzenia?
Polityka tego samego pochodzenia ma na celu ochronę danych użytkowników i uniemożliwianie złośliwym witrynom internetowym uzyskiwania dostępu do poufnych informacji z innych domen za pośrednictwem JavaScript.
Dlaczego Postman nie egzekwuje CORS?
Postman nie wymusza CORS, ponieważ nie jest przeglądarką i nie działa w środowisku przeglądarki, więc nie musi przestrzegać zasad Same-Origin.
Jak mogę rozwiązać błąd CORS w mojej aplikacji internetowej?
Aby rozwiązać błąd CORS, skonfiguruj serwer tak, aby zawierał odpowiedni plik 'Access-Control-Allow-Origin' nagłówek w odpowiedzi, zezwalający na źródło żądania.
Co robi 'Access-Control-Allow-Origin' nagłówek zrobić?
The 'Access-Control-Allow-Origin' nagłówek określa, które źródła mogą uzyskać dostęp do zasobu, umożliwiając żądania między źródłami.
Jaki jest cel withCredentials w XMLHttpRequest?
The withCredentials Właściwość wskazuje, czy żądania kontroli dostępu między lokacjami powinny być wykonywane przy użyciu poświadczeń, takich jak pliki cookie lub nagłówki autoryzacji.
Dlaczego otrzymuję błąd CORS, mimo że mój serwer zawiera plik 'Access-Control-Allow-Origin' nagłówek?
Nadal może pojawić się błąd CORS, jeśli inne wymagane nagłówki CORS, takie jak 'Access-Control-Allow-Methods' Lub 'Access-Control-Allow-Headers', brakuje lub są one nieprawidłowo skonfigurowane.
Czy mogę wyłączyć CORS w mojej przeglądarce?
Wyłączanie CORS w przeglądarce nie jest zalecane, ponieważ zagraża bezpieczeństwu. Zamiast tego skonfiguruj serwer tak, aby poprawnie obsługiwał CORS.
Co to jest żądanie wstępnej inspekcji w CORS?
Żądanie wstępne to wstępne żądanie wysyłane przez przeglądarkę przy użyciu metody OPCJE w celu ustalenia, czy wysłanie rzeczywistego żądania jest bezpieczne. Sprawdza, czy na serwerze są wymagane nagłówki CORS.

Zakończenie dyskusji

Zrozumienie niuansów CORS i polityki tego samego pochodzenia jest niezbędne dla twórców stron internetowych. Podczas gdy przeglądarki wymuszają rygorystyczne środki bezpieczeństwa w celu ochrony użytkowników, narzędzia takie jak Postman omijają te ograniczenia, ułatwiając testowanie interfejsów API. Odpowiednio konfigurując backend z niezbędnymi nagłówkami CORS, programiści mogą zapewnić płynną i bezpieczną komunikację pomiędzy frontendem a backendem. Rozwiązanie problemów CORS ma kluczowe znaczenie dla tworzenia funkcjonalnych i przyjaznych dla użytkownika aplikacji internetowych.