Encabezados de autorización de Chrome
Creo que tengo cors configurados correctamente en mi backend. La API está alojada en Heroku si eso ayuda. Aquí está el archivo server.js:
const express = require("express"); const helmet = require("helmet"); const cors = require("cors"); const bodyParser = require("body-parser"); const productsRouter = require("./products/products-router"); const ordersRouter = require("./orders/orders-router"); const emailsRouter = require("./emails/emails-router"); const corsOptions = { origin: "*", credentials: true, optionSuccessStatus: 200, }; const server = express(); server.use(express.json()); server.use(helmet()); server.use(cors(corsOptions)); server.use("/api/products", productsRouter); server.use("/api/orders", ordersRouter); server.use("/api/emails", emailsRouter); server.use((err, req, res, next) => { res.status(err.status || 500).json({ message: err.message, });I }); module.exports = server;Recibo un error cors cuando mi front-end intenta realizar solicitudes HTTP al backend. Dice lo siguiente:
El acceso a XMLHttpRequest en 'https://nanasoapsbackend.herokuapp.com/api/products/categories' desde el origen 'http://localhost:3000' ha sido bloqueado por la política CORS: No hay encabezado 'Access-Control-Allow-Origin' está presente en el recurso solicitado.
Sí, mi parte trasera y delantera están en diferentes dominios. Esto sucedió de repente, estaba funcionando bien sin errores cors durante los últimos meses, y de repente dejó de funcionar. Cualquier ayuda sería muy apreciada.
El problema es: no puede tener origen * (permitir todo) con credenciales de permiso. Consulte: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials
Tienes que configurar una lista blanca (lista de dominios que están permitidos)
const whitelist = ['http://www.example.com', 'http://www.otherexample.com'] const corsOptions = { origin: function (origin, callback) { if (whitelist.includes(origin)) { callback(null, true) } else { callback(new Error('Not allowed')) } } }Luego, en su lado del cliente (frontend), asegúrese de usar el indicador withCredientals en su agente http (axios, superagent, fetch, etc.)