Buenas tardes mis estimados, desde ayer tuve un problema con un proyecto, tenia que hacer una API con NodeJS y un CRUD Front-End consumiendo esa API solo con JavaScript, HTML y CSS, las dos montadas en un servicio en la nube (HEROKU), sucede que en medio de escribir y probar mi código en el Front-End, empezó a tener problemas con el las politicas CORS.
Tecnologías utilizadas:
Front: Fetch
Back: NodeJs, ExpressJs
* Middlewares
- Cors
- Compressión
Versiones package.json:
Version NodeJs:
Error en front:
RESUMEN DE LOS PROBLEMAS: Al hacer una petición con fetch en el metodo PATCH el servidor responde con problemas sobre cors.
NOTA:
- Los demas metodos (POST, DELETE, GET) funcionan bien.
- clientes como postman y thunder client de VSCode funcionan correctamente.
Como verán este error sucede cuando intento actualizar datos usando el metodo PATCH.
Los datos que envio es un token "Authorization": 'Bearer ${token}'
y un body con un objeto que contiene los datos a enviar.
El codigo que estoy usando para hacer la petición desde el front:
const request = async (url, method, data, action, token) => {
let catchData;
console.log(token, '--- from request');
await fetch(url, {
method: method,
mode: 'cors',
headers: {
'Content-Type': 'application/json',
'Authorization': token && `Bearer ${token}`,
"Access-Control-Allow-Methods": 'patch'
},
body: data && JSON.stringify(data())
})
.then(res => res.json())
.then(data => {
if (data.status === 'success') {
action && action(data);
};
catchData = data;
});
return catchData;
};
Los argumentos de request
son url: string (http//direccion.com)
, method: string (get,post, delete, patch)
, data: object (con los campos requeridos por el body al usar post o patch)
, (action: f() (funcion que se ejecuta al recibir la respuesta y lleva como parametro la respuesta))
, token: string (extraido de localstorage.getItem())
.
Codigo del Back-End:
const express = require('express');
const morgan = require('morgan');
const compression = require('compression');
const cors = require('cors');
// Routes
const { usersRouter } = require('./routes/user.routes');
const { clientsRouter } = require('./routes/client.routes');
// Controllers
const { globalErrorHandler } = require('./controllers/errors.controller');
// init express
const app = express();
// use middlewares
app.use(express.json());
const corsOptions = {
"Access-Control-Allow-Origin: *",
"Access-Control-Allow-Credentials": true,
'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE, PATCH, OPTIONS',
"Access-Control-Allow-Headers": 'Origin,X-Requested-With,Content-Type,Accept,content-type,application/json'
};
app.use(cors(corsOptions));
app.use(morgan('dev'));
app.use(compression());
// main routes
app.use('/api/v1/users', usersRouter);
app.use('/api/v1/clients', clientsRouter);
// Global error handdler
app.use(globalErrorHandler);
module.exports = { app };
Para mas informacion detallada les dejo el codigo fuente en github:
API: github
https://github.com/HorangelMillan/usersmanagement-api.git
Front github
https://github.com/HorangelMillan/usersmanagement-front.git
También les dejo la api desplegada en AWS para que lo prueben:
http://clientmanagementapi-env.eba-e2jtfavx.us-east-1.elasticbeanstalk.com/
Las dos aplicaciones desplegadas pero en heroku:
API:
https://usersmanagement-api.herokuapp.com/
FRONT:
https://usersmanagement-front.herokuapp.com/
Configuraciones de cors que no me han servido:
Sin cors:
app.use((req, res, next) => {
res.header("Access-Control-Allow-Origin", "*")
res.header(
"Access-Control-Allow-Headers",
"Origin, X-Requested, Content-Type, Accept Authorization"
)
if (req.method === "OPTIONS") {
res.header(
"Access-Control-Allow-Methods",
"POST, PUT, PATCH, GET, DELETE"
)
return res.status(200).json({})
}
next()
})