Tengo una interfaz (html) y un backend Node.js (express). Quiero hacer una solicitud a una API de terceros, pero tengo problemas de cors.
Ahora quiero poder tomar el valor de una entrada y agregarlo a mi URL de backend cuando lo solicite en el frontend (por ejemplo localbackend:3000/${input_value} ), luego use el parámetro pasado ( input_value ) en mi backend para formar el api url que necesito para hacer una llamada a la API externa.
Un poco de código:
índice.html
<input type="text" id="text">índice.js
document.getElementById("send").addEventListener("click", async (e) => { e.preventDefault(); var message = document.getElementById("text").value; if (message == undefined || message == "") { } else { let response = ""; await fetch(`http://localhost:3000/${message}`) .then((data) => data.json()) .then((data) => response = data) .catch((error) => console.error(error)); .... then response to be appended to another div...servidor.js
app.get("/", (req, res) => { axios .request( `http://someexternalserver/get?uid="simon"&msg=${where_i_need_the_input}` ) .then(function (response) { res.send(JSON.stringify(response.data)); }) .catch(function (error) { console.error(error); }); });Manualmente, puedo probar con éxito la API externa, pero quiero que esto se haga dinámicamente.
Siéntase libre de compartir una mejor solución o simplemente cómo hacer que esto funcione. Sin marcos FE, por favor.
Lo intenté:
El proxy cors-anywhere de Rob ( https://cors-anywhere.herokuapp.com/ ) que la API ha restringido.
Algo parece estar mal. Su aplicación frontend no parece estar realizando una solicitud directa a la API de terceros, pero el mensaje de error indica lo contrario.
Así es como configuraría las cosas con su aplicación Express actuando como un proxy entre su interfaz y el tercero...
Habilite cors en su aplicación Express si aún no lo ha hecho
const cors = require("cors"); app.use(cors());Puede ajustar esto más tarde para permitir solo orígenes específicos si lo desea. Ver cors-opciones de configuración .
Pase el message como parámetro de consulta (GET) o parámetro de cuerpo (POST). Un ejemplo de solicitud GET se vería así
document.getElementById("send").addEventListener("click", async (e) => { e.preventDefault(); const message = document.getElementById("text").value; if (message) { // this will never be `undefined` // create query parameters const params = new URLSearchParams({ message }); // send the request const res = await fetch(`http://localhost:3000/?${params}`); if (!res.ok) { throw new Error(`${res.status}: ${await res.text()}`) ; } const data = await res.json(); // append data to another div... } }); En su backend, capture el parámetro del message y reenvíelo a la API de terceros
app.get("/", async (req, res) => { const { data } = await axios.get("http://someexternalserver/get", { params { uid: "simon", // or '"simon"' if you actually need those quotes msg: req.query.messsage // get the query parameter }, headers: { "x-forwarded-for": req.ip // optional though the API might require it } }); res.json(data); }); No se trague ningún error en sus controladores de ruta Express. Siempre debe dejar que Express los maneje o llamar explícitamente a res.send() con un estado de error.