Forstå CORS-feil i jQuery, men ikke i Postman

Arthur Petit

Torsdag 4. juli 2024 09:58:30

Hvorfor oppstår CORS-feil i nettlesere?

Når du arbeider med JavaScript for å koble til en RESTful API, kan du støte på feilen "Ingen 'Access-Control-Allow-Origin'-overskrift er til stede på den forespurte ressursen". Denne feilen oppstår vanligvis på grunn av nettleserens Samme Origin Policy, som begrenser nettsider fra å sende forespørsler til et annet domene enn det som serverte nettsiden.

Interessant nok, når den samme forespørselen gjøres gjennom verktøy som Postman, oppstår ingen slik feil. Denne forskjellen kan være forvirrende for utviklere. Å forstå hvorfor XMLHttpRequest eller hente-anrop blokkeres av CORS i nettleseren, men ikke i Postman, er avgjørende for feilsøking og utvikling av sikre nettapplikasjoner.

Løse CORS-problemer i JavaScript med Flask Backend

JavaScript-grensesnittkode ved hjelp av 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);
    });
  });
});

Sette opp CORS i Flask

Python Backend-kode ved hjelp av kolbe

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

Løse CORS-problemer i JavaScript med Flask Backend

JavaScript-grensesnittkode ved hjelp av 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);
    });
  });
});

Sette opp CORS i Flask

Python Backend-kode ved hjelp av kolbe

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

Hvorfor CORS-problemer oppstår i nettlesere og ikke i Postman

Et avgjørende aspekt å forstå om Cross-Origin Resource Sharing (CORS) er sikkerhetsmekanismen som nettlesere implementerer for å beskytte brukere. Nettlesere håndhever policyen for samme opprinnelse, som forhindrer nettsider fra å sende forespørsler til et annet domene enn det som serverte nettsiden. Dette er et sikkerhetstiltak for å forhindre at ondsinnede nettsteder får tilgang til sensitiv informasjon på andre nettsteder gjennom JavaScript. Når du lager en XMLHttpRequest eller henteforespørsel fra en nettleser, ser den etter 'Access-Control-Allow-Origin' header i svaret fra serveren. Hvis denne overskriften ikke er til stede eller ikke tillater opprinnelsen som ber om, vil nettleseren blokkere forespørselen, noe som resulterer i en CORS-feil.

Postman, derimot, er ikke en nettleser, men et verktøy for å teste APIer. Den håndhever ikke policyen for samme opprinnelse fordi den ikke kjører i nettlesermiljøet. Derfor utfører den ikke de samme sikkerhetskontrollene og lar forespørsler sendes til et hvilket som helst domene uten begrensninger. Dette er grunnen til at du ikke støter på CORS-problemer når du bruker Postman til å sende samme forespørsel. Å forstå denne forskjellen er avgjørende for at utviklere skal feilsøke og løse CORS-relaterte problemer effektivt. Ved å konfigurere serveren til å inkludere de riktige CORS-overskriftene, kan du sikre at webapplikasjonen din kan kommunisere med eksterne APIer sikkert og uten feil.

Vanlige spørsmål og svar om CORS og JavaScript

Hva er CORS?
CORS står for Cross-Origin Resource Sharing, en mekanisme som gjør at begrensede ressurser på en nettside kan forespørres fra et annet domene utenfor domenet som ressursen stammer fra.
Hvorfor håndhever nettlesere retningslinjene for samme opprinnelse?
Retningslinjene for samme opprinnelse håndheves for å beskytte brukernes data og forhindre at ondsinnede nettsteder får tilgang til sensitiv informasjon fra andre domener gjennom JavaScript.
Hvorfor håndhever ikke Postman CORS?
Postman håndhever ikke CORS fordi det ikke er en nettleser og ikke kjører i et nettlesermiljø, så det trenger ikke å overholde Samme-Origin Policy.
Hvordan kan jeg løse en CORS-feil i webapplikasjonen min?
For å løse en CORS-feil, konfigurer serveren til å inkludere den aktuelle 'Access-Control-Allow-Origin' header i svaret, som tillater opprinnelsen som ber om.
Hva gjør 'Access-Control-Allow-Origin' header gjøre?
De 'Access-Control-Allow-Origin' header spesifiserer hvilke kilder som har tilgang til ressursen, og muliggjør kryssopprinnelsesforespørsler.
Hva er hensikten med withCredentials i XMLHttpRequest?
De withCredentials egenskapen indikerer hvorvidt tilgangskontrollforespørsler på tvers av nettsteder skal gjøres ved hjelp av legitimasjon som informasjonskapsler eller autorisasjonshoder.
Hvorfor får jeg en CORS-feil selv om serveren min inkluderer 'Access-Control-Allow-Origin' Overskrift?
Du kan fortsatt få en CORS-feil hvis andre nødvendige CORS-overskrifter, for eksempel 'Access-Control-Allow-Methods' eller 'Access-Control-Allow-Headers', mangler eller er feil konfigurert.
Kan jeg deaktivere CORS i nettleseren min?
Deaktivering av CORS i en nettleser anbefales ikke da det kompromitterer sikkerheten. Konfigurer i stedet serveren til å håndtere CORS riktig.
Hva er en preflight-forespørsel i CORS?
En forhåndskontrollforespørsel er en første forespørsel fra nettleseren ved å bruke OPTIONS-metoden for å avgjøre om den faktiske forespørselen er trygg å sende. Den ser etter nødvendige CORS-hoder på serveren.

Avslutter diskusjonen

Å forstå nyansene til CORS og Same Origin Policy er avgjørende for webutviklere. Mens nettlesere håndhever strenge sikkerhetstiltak for å beskytte brukere, omgår verktøy som Postman disse begrensningene, noe som gjør det enklere å teste APIer. Ved å konfigurere backend-en riktig med de nødvendige CORS-hodene, kan utviklere sikre jevn og sikker kommunikasjon mellom frontend og backend. Å adressere CORS-problemer er avgjørende for å lage funksjonelle og brukervennlige webapplikasjoner.