Estoy usando la ventana acoplable para ejecutar una aplicación de reacción frontal y una API de nodo/express. La aplicación de reacción se ejecuta en localhost:3000 y la API se ejecuta en localhost:9000 . Ambos son aplicaciones que funcionan y funcionan completamente. Sin embargo, cuando intento hacer una llamada de descanso desde la aplicación React a http://localhost:9000/api/whatever , recibo el siguiente error
XMLHttpRequest cannot load http://localhost:9000/api/schedule. No Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.`Este es mi archivo server.js para mi express api:
const express = require('express'); const port = process.env.PORT || 9000; const app = express(); require('./app/routes')(app); app.use(function(req, res, next) { // Website you wish to allow to connect res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000'); // Request methods you wish to allow res.setHeader('Access-Control-Allow-Methods', 'GET'); // Request headers you wish to allow res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type'); // Set to true if you need the website to include cookies in the requests sent // to the API (eg in case you use sessions) res.setHeader('Access-Control-Allow-Credentials', true); // Pass to next layer of middleware next(); }); app.listen(port, () => { console.log('listening on port : ' + port); })No estoy seguro de lo que me estoy perdiendo aquí.
Pestaña de red de Chrome:
Request URL:http://localhost:9000/api/schedule Request Method:GET Status Code:200 OK Remote Address:[::1]:9000 Response Headers view source Connection:keep-alive Content-Length:86 Content-Type:application/json; charset=utf-8 Date:Mon, 10 Apr 2017 04:40:06 GMT ETag:W/"56-l2wi6AdD2GGTOMvRjRYO96YmR0w" X-Powered-By:Express Request Headers view source Accept:application/json, text/plain, */* Accept-Encoding:gzip, deflate, sdch, br Accept-Language:en-US,en;q=0.8 Connection:keep-alive Host:localhost:9000 Origin:http://localhost:3000 Referer:http://localhost:3000/ User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36He podido hacer esto antes con la siguiente configuración:
app.use((req, res, next) => { const origin = req.get('origin'); // TODO Add origin validation res.header('Access-Control-Allow-Origin', origin); res.header('Access-Control-Allow-Credentials', true); res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE'); res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization, Cache-Control, Pragma'); // intercept OPTIONS method if (req.method === 'OPTIONS') { res.sendStatus(204); } else { next(); } }); Como puede ver en mi caso, estaba permitiendo más métodos que solo el GET y agregué encabezados adicionales permitidos (como el de Authorization que necesitaba en este caso), observe que en su caso especificó solo X-Requested-With y Content-Type , pero también podría necesitar el Origin si desea validar el origen.
También estoy interceptando la solicitud de OPTIONS para evitar enviar datos adicionales en ese caso.