Estoy usando esta API https://api.cryptonator.com/api/ticker/btc-usd Si pego esto en el navegador, funciona bien y proporciona el JSON requerido.
Pero cuando llamo desde mi aplicación de reacción, arroja un error CORS, que se omite usando.
fetch('https://api.cryptonator.com/api/ticker/btc-usd', { mode: 'no-cors', // 'cors' by default }) .then(res => res.json()) .then(res => { console.log(res); }) .catch(err => { console.log(err) })Pero ahora da error 503. Intenté lo mismo en el cartero, no funcionó al principio, pero cuando copié el campo 'Agente de usuario' y 'Cookie' de la pestaña de red del navegador al cartero, también funcionó en el cartero.
Intenté hacer lo mismo en reaccionar, dice 503. Incluso copié la solicitud de recuperación completa de la pestaña de red, todavía muestra 503.
Cualquiera que pueda ayudar en esto será muy apreciado.
Editar: incluso intenté agregar un proxy en package.json como "proxy": "https://api.cryptonator.com", y llamé a la API como fetch ( /api/ticker/btc-usd ) pero aún no se resuelve .
Gracias por tu último comentario. Es importante buscar una respuesta para un error exactamente con la descripción del error. La solución o su parte suele estar en la descripción del error. Aquí tiene: "FetchError: cuerpo de respuesta json no válido en token inesperado < en JSON en la posición 0", así que intente así en su componente: sin ganchos:
componentDidMount() { let url = "https://api.cryptonator.com/api/ticker/btc-usd"; fetch(url) .then((money) => money.json()) .then((money) => { console.log("resultat = ", money); this.setState({ coin: money.bodies, }); }); }y si usas ganchos puedes hacerlo así:
import React, { useState, useEffect } from 'react'; function App() { const [data, setData] = useState([]); useEffect(() => { const fetchData = async () => { const response = await fetch( 'https://api.cryptonator.com/api/ticker/btc-usd', ); const json = await response.json(); setData(json.hits); }; fetchData(); }); return ( <ul> {data.map(coin => ( <li key={coin.tricker.base}> <a href={coin.tricker.price}>{coin.tricker.target}</a> </li> ))} </ul> ); } export default App;esto es solo un ejemplo. Buena suerte con tu aplicación
Debe usar npm cors en su backend.
$ npm install corsy tienes un ejemplo de como usarlo con node y express.
var express = require("express"); var cors = require("cors"); var app = express(); app.use(cors()); app.get("/products/:id", function (req, res, next) { res.json({ msg: "This is CORS-enabled for all origins!" }); }); app.listen(3000, function () { console.log("CORS-enabled web server listening on port 3000"); });