Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

Rest API fråga

1
Skriv svar
Permalänk
Medlem
●

Rest API fråga

Hej!

Försöker komma åt json-filen från ett API. Jag kan se den helt och hållet att allt fungerar som det ska när jag går in på urln med rätt via webbläsaren som vilken adress som helst.

Använder en mall för ajax anrop från andra små projekt så det bör fungera. Men jag får felmeddelandet i konsolen hela tiden: Access to XMLHttpRequest at 'api-urln' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Koden jag använder är (har bytt ut min url då den har privata nycklar osv i sig):

function requestData () {
  var request = new XMLHttpRequest()
  request.open('GET', 'api-urln', true)
  request.send(null)
  request.onreadystatechange = function () {
    if (request.readyState === 4 && request.status === 200) {
      showInformation(request.responseText)
    }
  }
}

function showInformation (response) {
  response = JSON.parse(response)
  console.log(response)
}

Någon som har någon aning om varför det inte fungerar för mig? tack på förhand!

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av eldidy:

Hej!

Försöker komma åt json-filen från ett API. Jag kan se den helt och hållet att allt fungerar som det ska när jag går in på urln med rätt via webbläsaren som vilken adress som helst.

Använder en mall för ajax anrop från andra små projekt så det bör fungera. Men jag får felmeddelandet i konsolen hela tiden: Access to XMLHttpRequest at 'api-urln' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Koden jag använder är (har bytt ut min url då den har privata nycklar osv i sig):

function requestData () {
  var request = new XMLHttpRequest()
  request.open('GET', 'api-urln', true)
  request.send(null)
  request.onreadystatechange = function () {
    if (request.readyState === 4 && request.status === 200) {
      showInformation(request.responseText)
    }
  }
}
function showInformation (response) {
  response = JSON.parse(response)
  console.log(response)
}

Någon som har någon aning om varför det inte fungerar för mig? tack på förhand!

Gå till inlägget

Du kan testa lägga till,
request.withCredentials = true;
Innan du skickar din request.

Någon anledning till att du använder xhr över fetch?
CORS har att göra med att du försöker kontakta en domän som inte ligger på den du kontaktar från. Browsern blockerar sådanna requests av säkerhetsskäl.

Exempel med fetch:

async function fetchJSONData(url)
{
   const res = await fetch(url);
   const json = await res.json();
   return json;
}
Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av eldidy:

Hej!

Försöker komma åt json-filen från ett API. Jag kan se den helt och hållet att allt fungerar som det ska när jag går in på urln med rätt via webbläsaren som vilken adress som helst.

Använder en mall för ajax anrop från andra små projekt så det bör fungera. Men jag får felmeddelandet i konsolen hela tiden: Access to XMLHttpRequest at 'api-urln' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Koden jag använder är (har bytt ut min url då den har privata nycklar osv i sig):

function requestData () {
  var request = new XMLHttpRequest()
  request.open('GET', 'api-urln', true)
  request.send(null)
  request.onreadystatechange = function () {
    if (request.readyState === 4 && request.status === 200) {
      showInformation(request.responseText)
    }
  }
}

function showInformation (response) {
  response = JSON.parse(response)
  console.log(response)
}

Någon som har någon aning om varför det inte fungerar för mig? tack på förhand!

Gå till inlägget

Det fungerar inte för att Javascript (browsers) tvingar en strikt CORS, mer specifikt Access-Control-Allow-Origin.
Det går att komma runt på flera sätt men allt är egentligen ganska komplicerat förutom JSONP och kanske iframe-meckande, vilket har sina nackdelar för sig. Att lägga in ACAO på servern är det rätta svaret, att göra en egenmeckad proxy ett alternativt svar.

Rent generellt kan man säga att de som har skrivit APIet inte vill att man använder client-side Javascript för att anropa/använda det.
Detta förstärks mer eftersom din url har koder/nycklar i sig vilket inte är lämpligt att ha client-side då vem som helst då kan få tag på dessa.

Om du enbart gör detta för något test så kan man starta browsern i "osäkert läge" vilket tillåter att man går runt dessa CORS-restriktioner.

Visa signatur

ηλί, ηλί, λαμά σαβαχθανί!?

Redigera
Citera flera Citera
Permalänk
Medlem
●

@zaibuf: request.withCredentials = true; hände ingenting med :/. Men tack för tipset om fetch, börjar användas från och med nu!

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Leedow:

Det fungerar inte för att Javascript (browsers) tvingar en strikt CORS, mer specifikt Access-Control-Allow-Origin.
Det går att komma runt på flera sätt men allt är egentligen ganska komplicerat förutom JSONP och kanske iframe-meckande, vilket har sina nackdelar för sig. Att lägga in ACAO på servern är det rätta svaret, att göra en egenmeckad proxy ett alternativt svar.

Rent generellt kan man säga att de som har skrivit APIet inte vill att man använder client-side Javascript för att anropa/använda det.
Detta förstärks mer eftersom din url har koder/nycklar i sig vilket inte är lämpligt att ha client-side då vem som helst då kan få tag på dessa.

Om du enbart gör detta för något test så kan man starta browsern i "osäkert läge" vilket tillåter att man går runt dessa CORS-restriktioner.

Gå till inlägget

Oj låter väldigt mycket mer avancerat än vad jag har förståelse för... Men jag tackar så mycket för informationen!

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara