He estado trabajando en una aplicación híbrida que usa express y cors, esta aplicación envía solicitudes de obtención y publicación desde un archivo js de cliente a un archivo de servidor. Después de hacer funcionar la funcionalidad, he estado agregando toques finales, y al realizar una solicitud de obtención, recibí el siguiente error:
El acceso a XMLHttpRequest en 'http://address:3000/search/Cottonelle' desde el origen 'http://localhost:8000' ha sido bloqueado por la política de CORS: el encabezado 'Access-Control-Allow-Origin' tiene un valor ' http://address.com' que no es igual al origen proporcionado.
"Dirección" es la dirección IP de la máquina. La aplicación permite a los usuarios realizar entradas para diferentes elementos y enviarlos al servidor para que se guarden, así como también recuperarlos del servidor. La aplicación funcionó mientras usaba 'http://localhost' en lugar de la dirección, y a través de algunas pruebas descubrí que funciona cuando el CSP connect-src del html y la dirección utilizada en el archivo js del cliente son ambas la dirección IP, indicando que el problema está en el archivo js del servidor. Si bien las solicitudes de obtención no funcionan, la solicitud de publicación aún lo hace. La diferencia entre las solicitudes de publicación y obtención es que la publicación usa '/publicar' como su ruta, mientras que obtener usa '/buscar/:consulta'. El siguiente debería ser el código necesario más corto para reproducir el problema:
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com ;connect-src http://address:3000"> <script src="jquery.js"></script> <script src="client.js"></script> </head> <body> </body> </html>cliente.js:
const address = "http://address:3000" let name = "test" $.get(address + "/search/" + name ,function(data, status){ alert("The status text is: " + status + "\nThe status code is: " + data); });servidor.js:
const express = require('express') var cors = require('cors') const app = express() var corsOptions = { origin: 'http://address.com', optionsSuccessStatus: 200} app.use(cors(corsOptions)) const port = 3000 app.get('/search/:query', (req, res) => { let myStatus = res.statusCode; res.sendStatus(myStatus) }) app.listen(port, () => { console.log(`Example app listening at http://localhost:${port}`) })el server.js autorizó http://address.com pero no localhost:8000 (creo que la ejecución de su sitio web es local)
para resolver su problema, agregue localhost: 8000 en el host autorizado de server.js
app.use(cors( { origin: 'http://address.com', optionsSuccessStatus: 200}, { origin: 'http://localhost:8000', optionsSuccessStatus: 200} ))