0
308
ViewsExpress CORS infierno
Tengo problemas de CORS con una aplicación muy simple, me tomó alrededor de 10 minutos codificarla y pasé horas tratando de corregir este error de CORS.
El frontend, escrito en React, realiza una solicitud POST al backend Express usando axios .
app.use(cors()) se llama antes de la ruta única en mi aplicación Express.
Y esta es la solicitud de axios en mi aplicación React:
(await axios.post("http://localhost:3000/login", {username: username, password: password})).data.successRecibo este error CORS:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at...
Encabezado de solicitud de OPCIONES
Encabezado de la solicitud POST
Sin embargo, todo funciona bien en localhost .
Código expreso:
require('dotenv').config(); const createError = require('http-errors'); const express = require('express'); const cors = require('cors'); const compression = require('compression'); const app = express(); app.use(cors({origin: "*", allowedHeaders: ['Content-Type']})); app.use(express.json()); app.use(compression()); app.use(express.urlencoded({extended: true})); app.post("/login", (req, res) => { const params = req.body; if (params.username === process.env.USERNAME && params.password === process.env.PASSWORD) return res.json({success: true}); else return res.status(401).json({success: false}); }); app.use((req, res, next) => next(createError(404))); app.listen(process.env.NODE_PORT, () => console.log("Listening on port " + process.env.NODE_PORT));Solución de trabajo actual, no ideal:
Use la IP de la máquina en lugar de localhost .
(await axios.post("http://192.168.*.*:3000/login", {username: username, password: password})).data.success3 answers
Answer question0
Problema
Como se puede deducir del código fuente de Axios , cuando el segundo parámetro para post es un objeto (que es el caso aquí), Axios establece el encabezado Content-Type de la solicitud en application/json .
Este valor de encabezado hace que el navegador active la verificación previa de CORS . Luego, el servidor debe enumerar explícitamente Content-Type en el Access-Control-Allow-Headers de la respuesta a la solicitud de verificación previa; de lo contrario, la verificación previa de CORS fallará y se generará un error de CORS en su navegador.
Tenga en cuenta que la configuración predeterminada del middleware Express CORS (en el que confía actualmente) no permite encabezados.
Solución
Permita explícitamente Content-Type en su configuración de CORS. Puede hacerlo con la propiedad allowedHeaders del objeto de configuración del middleware CORS .
0
Necesitas configurar tus opciones cors. El origen puede ser una cadena o matriz que es una lista blanca de las fuentes autorizadas para realizar solicitudes. Incluso puede manejarlo con una función si necesita que sea dinámico. También puede permitir o rechazar métodos, validar credenciales, etc. Consulte el archivo Léame del paquete.
Cors es un mecanismo de seguridad para bloquear cualquier intento entre diferentes dominios. Por ejemplo, tiene su backend en un dominio como: https://wordpress.com y desea obtener su frontend de su dominio https://example.com , esto evita que cualquiera pueda acceder a sus puntos finales para robar información, pero esto no debe ser su único mecanismo de seguridad
const corsOptions = { origin: "http://localhost:3000", methods: ["GET","POST"] }; app.use(cors(corsOptions));0
Use la IP de la máquina en lugar de localhost .
await axios.post("http://192.168.*.*:3000/login", {username: username, password: password})).data.success`