Estoy desarrollando una api tomando datos de un archivo json que estará dentro de los archivos locales del proyecto.
Tengo un problema con las solicitudes en el front-end para obtener los datos, es un error cors.
En la API creo que habilité los encabezados correctamente, pero no sé si tengo que hacerlo en el frente y cómo debo hacerlo.
A continuación estará mi código del archivo index.js y luego el archivo script.js que servirá para obtener los datos de la API.
Archivo api principal que tiene cors
const express = require("express"); const morgan = require("morgan"); const bodyParser = require("body-parser"); // Routes const routeLogin = require('./routes/login'); const routeRegister = require('./routes/register'); const routeHashtags = require('./routes/hashtag'); const app = express(); // Use // Morgan app.use(morgan("dev")); // Body parser app.use(bodyParser.urlencoded({ extended: false })); app.use(bodyParser.json()); // Cors app.use((req, res, next) => { res.header("Access-Control-Allow-credentials", "true"); res.header("Acces-Control-Allow-Origin", "*"); res.header( "Acces-Control-Allow-Header", "Origin, X-Requested-With, Content-Type, Accept, Authorization, X-CSRF-Token" ); res.header('Acces-Control-Allow-Methods', "GET,OPTIONS, POST, DELETE, PUT, PATCH"); next(); }) // Routes app.use('/login', routeLogin); app.use('/register', routeRegister); app.use('/hashtag', routeHashtags); // Error app.use((req, res, next) => { const error = new Error("Erro! Não encontrato!"); error.status = 404; next(error); }) app.use((error, req, res, next) => { res.status(error.status || 500); return res.send({ error: { message: error.message } }) }) module.exports = app;Interfaz
async function dashboard(){ async function pendingPosts(){ await fetch("http://localhost:3120/hashtag/") .then((res) => res.json()) .then((data) => {console.log(data)}) } pendingPosts() } dashboard()necesitas usar
npm instalar cors
var cors = require('cors')
app.use(cors())
prueba esto espero que te ayude
instalar la dependencia cors y luego usarla es un middleware
app.use(cors());Después de esto, si realiza una solicitud a su servidor, se devolverá un nuevo encabezado de la siguiente manera:
Access-Control-Allow-Origin: *
Determina qué orígenes pueden acceder a los recursos del servidor a través de CORS.
El comodín * permite el acceso desde cualquier origen o, si desea permitir el acceso a un origen en particular, agregue la opción de origen al middleware.
app.use(cors({ origin: 'http://localhost:3000' })); Después de esto, si realiza una solicitud a su servidor, se devolverá un nuevo encabezado de la siguiente manera, Access-Control-Allow-Origin: http://localhost:3000