Mi frontend :8080 y mi backend :8081 se ejecutan en la misma computadora http://192.168.178.20 . Si navego a http://localhost:8080 en mi computadora, todo funciona bien (puedo enviar solicitudes a mi backend). Cuando navego desde mi teléfono inteligente a http://192.168.178.20:8080 , la interfaz se mostrará según lo previsto. Pero no puedo enviar solicitudes desde mi teléfono inteligente al backend, creo que tiene que ver con la configuración de cors, pero no pude encontrar la manera de cambiarlo correctamente.
¿Tengo que incluir mi teléfono inteligente en la lista blanca de alguna manera en el backend? ¿Cómo se ve una configuración adecuada cuando quiero ejecutar esto en producción y no en modo de desarrollo?
La dirección IP privada de los teléfonos inteligentes (misma red que la computadora) es 192.168.178.21 .
Mi configuración de backend actual se ve así:
import cors from 'cors'; import express from 'express'; import cookieParser from 'cookie-parser'; const SERVER_PORT = 8081; const app = express(); app.use(cors({ origin: ['http://localhost:8080'], credentials: true })); app.use(express.urlencoded({ extended: true })); app.use(express.json()); app.use(cookieParser()); app.use((req, res, next) => { res.header('Access-Control-Allow-Origin', 'http://localhost:8080'); res.header('Access-Control-Allow-Credentials', true); res.header('Access-Control-Allow-Headers', 'x-access-token, Origin, Content-Type, Accept'); res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS'); next(); }); // my routes ... app.listen(SERVER_PORT, () => { console.log(`Backend is listening on port ${SERVER_PORT}`); });Gracias por adelantado.
Desde su teléfono inteligente, el origen es http://192.168.178.20:8080 , pero en su configuración CORS solo permite http://localhost:8080 . Probar
app.use(cors({ origin: ['http://localhost:8080', 'http://192.168.178.20:8080'], allowedHeaders: 'x-access-token', methods: 'GET, POST, PUT, DELETE, OPTIONS', credentials: true })); y elimine el middleware (redundante) que establece explícitamente los encabezados Access-Control-Allow-* . ( Origin, Content-Type, Accept no es necesario configurarlos como encabezados permitidos, siempre están permitidos, a menos que quiera decir, por ejemplo, Content-Type: application/json ).
La dirección IP del cliente (su teléfono inteligente) no importa, solo la dirección y el host del servidor frontend.