0

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:

package.json

Version NodeJs:

version de node

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.

Error al hacer una peticion patch a la API

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:

De https://stackoverflow.com/questions/72166644/node-and-heroku-error-no-access-control-allow-origin-header-is-present-on-th

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()
})
1

1 respuesta 1

0

Chicos como están, ya solucioné el problema, quizás sea mi culpa ya que en fetch, el campo 'methods' debemos colocarlos en mayúscula, mas sin embargo nos deja colocar algunos métodos como get, post, delete que si me funcionaban pero el 'PATCH' ese si hay que ponerlo en mayúscula o si no sale el error de cors.

aquí dejo lo que leí para enterarme de este caso por si les sirve.

https://github.com/expressjs/cors/issues/252

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.