CORS-virheiden ymmärtäminen jQueryssa, mutta ei Postmanissa

Arthur Petit

Torstai 4. heinäkuuta 2024 klo 9.38.31

Miksi CORS-virheitä ilmenee selaimissa?

Kun yrität muodostaa yhteyden RESTful API:hen JavaScriptin avulla, saatat kohdata "Access-Control-Allow-Origin"-otsikkoa ei ole pyydettyssä resurssissa. Tämä virhe johtuu yleensä selaimen Same Origin Policy -käytännöstä, joka estää verkkosivuja tekemästä pyyntöjä eri toimialueelle kuin se, joka palveli verkkosivua.

Mielenkiintoista on, että kun sama pyyntö tehdään Postmanin kaltaisten työkalujen kautta, tällaista virhettä ei tapahdu. Tämä ero voi olla hämmentävä kehittäjille. Sen ymmärtäminen, miksi CORS estää XMLHttpRequest- tai fetch-kutsut selaimessa, mutta ei Postmanissa, on ratkaisevan tärkeää vianetsinnän ja suojattujen verkkosovellusten kehittämisen kannalta.

CORS-ongelmien ratkaiseminen JavaScriptissä Flask-taustaohjelmalla

JavaScript-käyttöliittymäkoodi jQueryn avulla

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

CORS:n asettaminen pulloon

Python-taustakoodi Flaskilla

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

CORS-ongelmien ratkaiseminen JavaScriptissä Flask-taustaohjelmalla

JavaScript-käyttöliittymäkoodi jQueryn avulla

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

CORS:n asettaminen pulloon

Python-taustakoodi Flaskilla

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

Miksi CORS-ongelmia esiintyy selaimissa eikä Postmanissa?

Yksi keskeinen näkökohta Cross-Origin Resource Sharingissa (CORS) on tietoturvamekanismi, jonka selaimet ottavat käyttöön käyttäjien suojelemiseksi. Selaimet noudattavat samaa alkuperää koskevaa käytäntöä, joka estää verkkosivuja tekemästä pyyntöjä eri toimialueelle kuin se, joka palveli verkkosivua. Tämä on turvatoimenpide, jolla estetään haitallisia verkkosivustoja pääsemästä muiden verkkosivustojen arkaluontoisiin tietoihin JavaScriptin kautta. Kun teet XMLHttpRequest- tai noutopyynnön selaimesta, se tarkistaa, onko 'Access-Control-Allow-Origin' otsikko palvelimen vastauksessa. Jos tätä otsikkoa ei ole tai se ei salli pyynnön alkuperää, selain estää pyynnön, mikä johtaa CORS-virheeseen.

Postman sen sijaan ei ole selain, vaan työkalu API-testaukseen. Se ei pakota Saman alkuperän käytäntöä, koska se ei ole käynnissä selainympäristössä. Siksi se ei suorita samoja turvatarkastuksia ja sallii pyyntöjen tekemisen mille tahansa toimialueelle ilman rajoituksia. Tästä syystä et kohtaa CORS-ongelmia, kun käytät Postmania saman pyynnön tekemiseen. Tämän eron ymmärtäminen on ratkaisevan tärkeää, jotta kehittäjät voivat tehdä vianmäärityksen ja ratkaista CORS-ongelmat tehokkaasti. Määrittämällä palvelimen sisältämään asianmukaiset CORS-otsikot, voit varmistaa, että verkkosovelluksesi voi kommunikoida ulkoisten API-liittymien kanssa turvallisesti ja ilman virheitä.

Yleisiä kysymyksiä ja vastauksia CORSista ja JavaScriptistä

Mikä on CORS?
CORS on lyhenne sanoista Cross-Origin Resource Sharing, mekanismi, joka mahdollistaa verkkosivun rajoitettujen resurssien pyytämisen toiselta verkkotunnukselta sen verkkotunnuksen ulkopuolelta, josta resurssi on peräisin.
Miksi selaimet noudattavat samaa alkuperää koskevaa käytäntöä?
Saman alkuperän käytäntö on pakotettu suojaamaan käyttäjien tietoja ja estämään haitallisia verkkosivustoja pääsemästä luottamuksellisiin tietoihin muista verkkotunnuksista JavaScriptin kautta.
Miksi Postimies ei pakota CORS:ia?
Postman ei pakota CORS:ää, koska se ei ole selain eikä toimi selainympäristössä, joten sen ei tarvitse noudattaa Saman alkuperän käytäntöä.
Kuinka voin ratkaista CORS-virheen verkkosovelluksessani?
Voit ratkaista CORS-virheen määrittämällä palvelimen sisällyttämään asianmukaiset tiedot 'Access-Control-Allow-Origin' vastauksen otsikko, joka sallii pyynnön alkuperän.
Mitä tekee 'Access-Control-Allow-Origin' otsikko tehdä?
The 'Access-Control-Allow-Origin' otsikko määrittää, mitkä alkuperät saavat käyttää resurssia, mikä mahdollistaa lähteiden väliset pyynnöt.
Mikä on tarkoitus withCredentials XMLHttpRequestissä?
The withCredentials ominaisuus osoittaa, tuleeko sivustojen väliset Access-Control-pyynnöt tehdä käyttämällä tunnistetietoja, kuten evästeitä tai valtuutusotsikoita.
Miksi saan CORS-virheen, vaikka palvelimeni sisältää 'Access-Control-Allow-Origin' otsikko?
Saatat silti saada CORS-virheen, jos muita vaadittuja CORS-otsikoita, kuten 'Access-Control-Allow-Methods' tai 'Access-Control-Allow-Headers', puuttuvat tai on määritetty väärin.
Voinko poistaa CORS:n käytöstä selaimessani?
CORS:n poistamista käytöstä selaimessa ei suositella, koska se vaarantaa turvallisuuden. Määritä sen sijaan palvelimesi käsittelemään CORS oikein.
Mikä on lentoa edeltävä pyyntö CORSissa?
Esitarkastuspyyntö on selaimen OPTIONS-menetelmää käyttäen tekemä ensimmäinen pyyntö määrittääkseen, onko todellinen pyyntö turvallista lähettää. Se tarkistaa tarvittavat CORS-otsikot palvelimelta.

Keskustelun päätteeksi

CORS:n vivahteiden ja saman alkuperäpolitiikan ymmärtäminen on välttämätöntä verkkokehittäjille. Vaikka selaimet soveltavat tiukkoja turvatoimia käyttäjien suojelemiseksi, Postmanin kaltaiset työkalut ohittavat nämä rajoitukset, mikä helpottaa sovellusliittymien testaamista. Määrittämällä backend oikein tarvittavilla CORS-otsikoilla kehittäjät voivat varmistaa sujuvan ja turvallisen tiedonsiirron käyttöliittymän ja taustajärjestelmän välillä. CORS-ongelmien ratkaiseminen on ratkaisevan tärkeää toimivien ja käyttäjäystävällisten verkkosovellusten luomisessa.