1

Estoy teniendo un problema con una petición AJAX desde el navegador Chrome el cual no me había pasado nunca. Estoy requiriendo datos de la API de Dark Sky y me aparece este mensaje:

Utilizo NodeJS con express

localhost/:1 XMLHttpRequest cannot load https://api.darksky.net/forecast/bcce7da12ae098129b6c69b207e89ecb/28.1235459,-15.4362574. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3030' is therefore not allowed access.

  1. Ya he utilizado las flags --disable-web-security --user-data-dir
  2. He usado el proxy CORS de crossoriginme.com
  3. He customizado el header en la peticion AJAX que hize con jQuery
  4. En codepen.io me funciona perfectamente y puedo comunicarme sin problemas

Y nada, que no me quiere entregar los datos, aquí debajo pongo el código:

**Configuración express: **

   const express = require('express')
   const app = express();

let port = process.env.PORT || 3030;

app.set('view engine', 'jade');

app.use(express.static(__dirname + '/public'))

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next()
})

app.get('/', (request, response) => {
   response.render('index')
 })

app.listen(port, () => {
  console.log(`Server listening on port ${port}`)
})

Archivo JS

import $ from 'jquery';

function getLocation() {
  if ("geolocation" in navigator) {
    navigator.geolocation.getCurrentPosition(function(position) {
      fetchWeatherData(position.coords.latitude, position.coords.longitude)
    }, function(error) {
      //Aqui manejo los errores
    })
  } else {
         //Pendiente aun
   }
}

function fetchWeatherData(latitude, longitude) {
  let URL = `https://api.darksky.net/forecast/bcce7da12ae098129b6c69b207e89ecb/${latitude},${longitude}`
  $.ajax(URL, {
    method: 'GET',
    dataType: 'json',
    beforeSend: function(request) {
      request.setRequestHeader("Access-Control-Allow-Origin", '*');
    },
    success: function(response) {
      console.log(response.data)
    }
  })

}

getLocation()

Uso gulp + browserify + babelify para hacer el bundle

3
  • Acabo de solucionarlo ahora mismo, justo en la función de success, pensaba que para acceder al main body del objeto JSON debia adjuntarle .data pero no es así y ahora al solo hacer el console.log(response) si me hace la petición correctamente y obtengo el JSON. Aun así no entiendo porque simplemente no obtuve un statusCode 404 de la petición Commented el 21 jul. 2017 a las 19:01
  • No te recomiendo activar la bandera para desactivar la política de seguridad del navegador para peticiones de dominio cruzado. En su lugar, simplemente pudiste establecer CORS en un middleware de Express. Eso hubiese sido suficiente.
    – gugadev
    Commented el 22 jul. 2017 a las 13:16
  • Gracias por el consejo, ya he reactivado la política de seguridad del navegador y hago la petición cambiando el dataType a 'jsonp' y todo funciona correctamente, gracias por las respuestas! Commented el 22 jul. 2017 a las 16:26

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.