Hvorfor får JavaScript-koden min en "No 'Access-Control-Allow-Origin ' header is present on the requested resource " feil når Postman ikke gjør det?

Jeg prøver å autorisere ved hjelp av JavaScript ved å koble til RESTful API innebygd i Flask. Når jeg sender forespørselen, får jeg imidlertid følgende feil:

XMLHttpRequest kan ikke laste http://myApiUrl/login. Ingen 'Access-Control-Allow-Origin' header er til stede på den forespurte ressursen. Origin 'null' er derfor ikke tillatt tilgang.

Jeg vet at API-et eller den eksterne ressursen må angi overskriften, men hvorfor fungerte det da jeg sendte forespørselen via Chrome-utvidelsen Postman?

Dette er forespørselskoden:

$.ajax({
    type: "POST",
    dataType: 'text',
    url: api,
    username: 'user',
    password: 'pass',
    crossDomain : true,
    xhrFields: {
        withCredentials: true
    }
})
    .done(function( data ) {
        console.log("done");
    })
    .fail( function(xhr, textStatus, errorThrown) {
        alert(xhr.responseText);
        alert(textStatus);
    });
shady sherif
Redigerte spørsmål 27. oktober 2019 в 12:06
Programmering
javascript jquery cors same-origin-policy flask-restless
17. november 2013 в 7:29
14 visninger
Løsning

Hvis jeg har forstått det riktig, sender du en XMLHttpRequest til et annet domene enn siden din ligger på. Nettleseren blokkerer den, ettersom den vanligvis tillater en forespørsel med samme opprinnelse av sikkerhetsgrunner. Du må gjøre noe annet når du vil sende en forespørsel på tvers av domener. En veiledning om hvordan du gjør det er Bruke CORS.

Når du bruker Postman, er de ikke begrenset av disse retningslinjene. Sitert fra Cross-Origin XMLHttpRequest:

Vanlige nettsider kan bruke XMLHttpRequest-objektet til å sende og motta data fra eksterne servere, men de er begrenset av de samme retningslinjene for opprinnelse. Utvidelser er ikke så begrenset. En utvidelse kan snakke med eksterne servere utenfor sin opprinnelse, så lenge den først ber om tillatelser på tvers av opprinnelse.

Peter Mortensen
Redigert svar 23. januar 2014 в 12:46
Kommentarer (15)

Hvis du kan håndtere JSON i retur, kan du prøve å bruke JSONP (merk P på slutten) for å snakke mellom domener:

$.ajax({
  type: "POST",
  dataType: 'jsonp',
  ...... etc ......

Lær mer om hvordan du arbeider med JSONP her:

Fremveksten av JSONP - i hovedsak et samstemt skripthack på tvers av nettsteder - har åpnet døren for kraftige mashups av innhold. Mange kjente nettsteder tilbyr JSONP-tjenester som gir deg tilgang til innholdet deres via et forhåndsdefinert API.

Hristiyan Dodov
Redigert svar 13. juli 2017 в 6:14
Kommentarer (9)

Det er et problem på tvers av domener ved bruk av Ajax. Du må være sikker på at du har tilgang til filene dine på samme http://-bane uten www. (eller tilgang fra http://www. og post til samme bane inkludert www.) som nettleseren anser som et annet domene når du får tilgang via en www.-bane, slik at du ser hvor problemet er. Du poster til et annet domene, og nettleseren blokkerer flyten på grunn av opprinnelsesproblemet.

Hvis API ikke er plassert på samme vert som du forespør fra, blokkeres flyten, og du må finne en annen måte å kommunisere med API-et på.

Alin Razvan
Redigert svar 2. april 2015 в 9:31
Kommentarer (1)