Tengo un botón que envía un informe de error de la API; sin embargo, recientemente lo moví de Main.js a su propia clase y, de repente, recibo errores de CORS, entre otros, cada vez que intento usarlo. Investigué un poco, pero no puedo entender por qué esto se activaría simplemente moviendo la función a su propia clase, buscando orientación sobre por qué podría ocurrir este comportamiento y cómo evitarlo.
Errores:
Uncaught (in promise) TypeError: response.json is not a function Access to fetch at 'exampleUrl' from origin 'http://localhost:4567' has been blocked by CORS policy: Request header field token is not allowed by Access-Control-Allow-Headers in preflight response.
Uncaught (in promise) TypeError: Failed to fetch $("#bugForm").submit((e) => { e.preventDefault() const input = document.getElementById('nameInput'); // logic here const bugInfo = { info: "Hello" } Logger.logInfo(bugInfo).then(console.log('print')) }) });Registrador.js
class Logger { constructor(settings) { // getting the settings here and assigning it to the constructor variable this.settings = settings; } static async logInfo(data = {}) { console.log('Hello!') const url = 'https://www.pivotaltracker.com/services/v5/projects/2530461/stories' const response = fetch(url, { method: 'POST', headers: { "Token": `${metadata.settings.token}}`, "Content-Type": "application/json" }, body: JSON.stringify(data) }); return response.json(); } } const metadata = { settings: "Hello" } const logger = new Logger(metadata.settings);Código antes de pasar a una nueva clase:
async function reportBug(data = {}) { const url = 'urlexample' const response = await fetch(url, { method: 'POST', headers: { "X-TrackerToken": `${metadata.settings.token}`, "Content-Type": "application/json" }, body: JSON.stringify(data) }); return response.json(); } enter code hereNo, lo más probable es que esto no tenga nada que ver con mover su función a otra clase.
Pero antes que nada, estás usando fetch wrong
const response = fetch(url, { ...});devuelve una promesa. Tienes que esperar a que resuelva o rechace, hasta que puedas intentar acceder a su cuerpo. Es decir, no puedes simplemente hacer
return response.json() porque Promise no tiene un método json() (como te dice el primer error). Tienes que usar .then(...).catch(...) o await . Por ejemplo
return fetch(...) .then(response => { if (response.ok) //check if httpstatus is 2xx return response.json(); throw new Error(`status ${response.status`); } Pero tenga en cuenta que esto también devolverá una Promesa (ya que response.json() es nuevamente asíncrono y devuelve una promesa), que debe esperar. Y (en algún momento) tiene que .catch() los errores de las promesas rechazadas (eso es lo que le dice el tercer error, su fetch encontró algún error que no está detectando) Tome uno de los miles de tutoriales sobre programación asincrónica y rehaga su código.
El segundo error le dice que a la respuesta de ese servidor le falta una definición de encabezado específica del encabezado Access-Control-Allowed-Headers . (y eso es lo más probable que cause que su fetch falle). Es decir, está enviando un encabezado de Token al servidor que no está permitido por el servidor. Entonces, si dijo que funcionó antes de mover el código, probablemente no tenía ese encabezado antes y lo agregó poco después de mover el código. Aunque no estoy muy seguro, cómo habría funcionado esa programación asíncrona incorrecta...