2

Estoy desarrollando una SPA desde la que haría consultas a una app en wiki.js. Desde el playground de la wiki (url/graphql) no tengo ningún problema (también hice la prueba desde postman y anda bien) pero cuando hago la consulta desde mi localhost me da este error:

[Error] No se pudo establecer conexión con el servidor. [Error] Fetch API cannot load http://localhost:4000/graphql due to access control checks. [Error] Failed to load resource: No se pudo establecer conexión con el servidor. (graphql, line 0) [Error] Unhandled Promise Rejection: TypeError: Load failed promiseEmptyOnRejected promiseReactionJob

Este es el código con el que hago el llamado:

fetch(url, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json',       
             'Authorization': `Bearer ${token}`
},
  body: JSON.stringify({ query: `
  query{
    pages {
      list{
        title
        id
        path
      }
        single(id:13){
        title
        id
        path
        content
      }
    }
  }
  ` }),
})
  .then(res => res.json())
  .then(res => console.log(res))

Parece ser un problema de CORS, pero no estaría pudiendo solucionarlo.

16
  • Ahí edité la query tal cual la hago en playground
    – Sancaf
    Commented el 27 oct. 2021 a las 12:01
  • No... solo un index.html con el script del index.js que tiene solo el código que puse ahí (no conozco webpack ni se bien cómo sería lo del proxy)
    – Sancaf
    Commented el 27 oct. 2021 a las 16:06
  • Esta web que desarrollaste, la creaste con node/express? o por ejemplo con el tutorial de graphql?
    – g.4
    Commented el 27 oct. 2021 a las 16:36
  • No, pero entiendo que eso es para desarrollar una api GraphQL propia, no para hacer consultas..
    – Sancaf
    Commented el 27 oct. 2021 a las 16:44
  • 2
    con la extension live-server de visual studio code
    – Sancaf
    Commented el 27 oct. 2021 a las 23:52

1 respuesta 1

0

Comparto la configuración con la cual, logré establecer una conexión exitosa entre vscode live-server y la API graphQL de Github:

const url = "https://api.github.com/graphql";
fetch(url, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json',       
    'Authorization': 'Bearer token'//aqui va tu token
    },
    body: JSON.stringify({ query: `
      query { 
        repository(owner: "user", name: "repoName") { 
          description
        }
      }`
    }),
  }).then(res => res.json()).then(res => console.log(res))

No hubo necesidad de configurar el proxy de live-server, lo cual me sorprendio pues yo tenía conocimiento de los problemas CORS/proxy.

Puede que esta configuración les sirva de ejemplo base, para consumir otros endpoints graphQL que requieran credenciales.

Proxy live-server

Se puede intentar configurar el proxy para live-server, hay que editar el archivo settings.json:

Users>tu_usuario>Library>Application Support>Code>User>settings.json

Se debe agregar esta propiedad:

"liveServer.settings.proxy":{
        "enable": false,//aqui va true
        "baseUri": "/",
        "proxyUri": "http://127.0.0.1:80"//puede que aqui vaya tu endpoint graphql http://localhost:4000
    }

Luego la variable urlque consume fetch, quedaría como:

let url = "/graphql"

Espero que esta respuesta sea de ayuda.

5
  • Es exactamente igual a mi código...
    – Sancaf
    Commented el 29 oct. 2021 a las 3:59
  • ¿Que me dices de la url? ¿Tambien estas pasando el endpoint de wiki.js para graphql? De mi lado funciona este ejemplo para GitHub, esta muy interesante la situación, saludos
    – g.4
    Commented el 29 oct. 2021 a las 4:35
  • Sí, tengo bien puesta la url. Acabo de probar haciendo la consulta a la api de GitHub y si puedo. No sé qué onda...
    – Sancaf
    Commented el 29 oct. 2021 a las 12:02
  • He puesto la info de como configurar proxy para live-server, es lo que yo trataría de hacer, suerte colega
    – g.4
    Commented el 29 oct. 2021 a las 16:33
  • No me dio resultado, pero bueno, gracias por el esfuerzo
    – Sancaf
    Commented el 29 oct. 2021 a las 19:58

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.