0

Im tryng to access the data connecting to the API of a friends system. Im using postman to generate the request and then I copied it into my code. I'd like to be able to access the different object's fields

I've tried installing the cors extension for chrome.

Here's how im making the request in my script.

   var request = new XMLHttpRequest()

   request.open('GET','http://controlforestal.pablocanales.info/api/trozos?total=100&limit=100&offset=0&search=&status=&codigoOrigen=&largo=&diametro=&order-by=codigo&order-dir=desc&token=****', true)
request.onload = function() {
  // Begin accessing JSON data here
  var data = JSON.parse(this.response)
  if (request.status >= 200 && request.status < 400) {
data.forEach(trozo => {
  const card = document.createElement('div')
  card.setAttribute('class', 'card')

  const h1 = document.createElement('h1')
  h1.textContent = trozo.codigo

  container.appendChild(card)
  card.appendChild(h1)
})
  } else {
const errorMessage = document.createElement('marquee')
errorMessage.textContent = `error`
app.appendChild(errorMessage)
  }
}

request.send()

This is the error that the console is showing me.

Access to XMLHttpRequest at 'http://controlforestal.pablocanales.info/api/trozos?total=100&limit=100&offset=0&search=&status=&codigoOrigen=&largo=&diametro=&order-by=codigo&order-dir=desc&token=****' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Headers are

HTTP/1.1 200 OK
Server: nginx/1.4.6 (Ubuntu)
Content-Type: application/json
X-Powered-By: PHP/5.5.9-1ubuntu4.21
Cache-Control: no-cache
Date: Thu, 12 Sep 2019 23:47:39 GMT
X-Frame-Options: SAMEORIGIN
ug_
  • 11,267
  • 2
  • 35
  • 52
papafrita
  • 29
  • 1
  • 3
  • 2
    because `controlforestal.pablocanales.info` does not want you accessing it's resources from a client (browser) - that's what CORS does, it protects resources from being "borrowed" in web pages – Jaromanda X Sep 12 '19 at 23:47
  • is your webpage coming from a server (local or otherwise) or is it using `file:///` protocol? – Jaromanda X Sep 12 '19 at 23:49
  • 1
    I removed your token from the question. It is generally a bad idea to put that kind of sensitive information in a public post. To make up for this I added the response headers from the API to your question. – ug_ Sep 12 '19 at 23:51
  • The error message is pretty clear. It requires a header that isn't present. – jhpratt Sep 12 '19 at 23:53

1 Answers1

0

Depending on what server you are using, you will have to enable cors in your server code. This allows your server (I assume localhost in this case) to make API request to third party API Libraries (controlforestal in this case). Refer CORS documentation for more details. https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

You can find implementation of CORS using XMLHttpRequest below: https://www.html5rocks.com/en/tutorials/cors/

Depending on the project where you are using CORS, you can also prepend your api request with https://cors-anywhere.herokuapp.com/YOUR_API_URL_GOES_HERE and it should do the job for you.

noor
  • 1,611
  • 16
  • 16