Sin ‘Access-Control-Allow-Origin’ – Node / Apache Port Issue

He creado una pequeña API usando Node / Express e intentando extraer datos usando Angularjs, pero como mi página html se está ejecutando en apache en localhost: 8888 y la API del nodo está en el puerto 3000, recibo el mensaje No ‘Access-Control- Permitir-Origen ‘. Intenté usar node-http-proxy y Vhosts Apache pero no tuve mucho éxito, por favor vea el error completo y el código a continuación.

“XMLHttpRequest no puede cargar localhost: 3000. Ningún encabezado ‘Access-Control-Allow-Origin’ está presente en el recurso solicitado. Por lo tanto, el origen ‘localhost: 8888’ no tiene permiso de acceso.”

// Api Using Node/Express var express = require('express'); var app = express(); var contractors = [ { "id": "1", "name": "Joe Blogg", "Weeks": 3, "Photo": "1.png" } ]; app.use(express.bodyParser()); app.get('/', function(req, res) { res.json(contractors); }); app.listen(process.env.PORT || 3000); console.log('Server is running on Port 3000') // Angular code angular.module('contractorsApp', []) .controller('ContractorsCtrl', function($scope, $http,$routeParams) { $http.get('localhost:3000').success(function(data) { $scope.contractors = data; }) // HTML  
  • {{person.name}}

Intente agregar el siguiente middleware a su aplicación NodeJS / Express (he agregado algunos comentarios para su conveniencia):

 // Add headers app.use(function (req, res, next) { // Website you wish to allow to connect res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8888'); // Request methods you wish to allow res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE'); // 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(); }); 

¡Espero que ayude!

La respuesta aceptada está bien, en caso de que prefiera algo más corto, puede usar un complemento llamado cors disponible para Express.js

Es simple de usar, para este caso particular:

 var cors = require('cors'); // use it before all route definitions app.use(cors({origin: 'http://localhost:8888'})); 

Otra forma es simplemente agregar los encabezados a su ruta:

 router.get('/', function(req, res) { res.setHeader('Access-Control-Allow-Origin', '*'); res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE'); // If needed res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type'); // If needed res.setHeader('Access-Control-Allow-Credentials', true); // If needed res.send('cors problem fixed:)'); }); 

La respuesta principal funcionó bien para mí, excepto que necesitaba incluir en la lista blanca más de un dominio.

Además, la respuesta principal adolece del hecho de que el middleware no maneja la solicitud OPTIONS y no la obtiene automáticamente.

allowed_origins dominios allowed_origins en la lista blanca como allowed_origins en la configuración Express y coloco el dominio correcto según el encabezado de origin ya que Access-Control-Allow-Origin no permite especificar más de un dominio.

Esto es lo que terminé con:

 var _ = require('underscore'); function allowCrossDomain(req, res, next) { res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS'); var origin = req.headers.origin; if (_.contains(app.get('allowed_origins'), origin)) { res.setHeader('Access-Control-Allow-Origin', origin); } if (req.method === 'OPTIONS') { res.send(200); } else { next(); } } app.configure(function () { app.use(express.logger()); app.use(express.bodyParser()); app.use(allowCrossDomain); }); 

El código de respuesta solo permite localhost: 8888. Este código no se puede implementar en la producción o en un servidor y nombre de puerto diferentes.

Para que funcione para todas las fonts, use esto en su lugar:

 // Add headers app.use(function (req, res, next) { // Website you wish to allow to connect res.setHeader('Access-Control-Allow-Origin', '*'); // Request methods you wish to allow res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE'); // 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.all('*', function(req, res,next) { /** * Response settings * @type {Object} */ var responseSettings = { "AccessControlAllowOrigin": req.headers.origin, "AccessControlAllowHeaders": "Content-Type,X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Date, X-Api-Version, X-File-Name", "AccessControlAllowMethods": "POST, GET, PUT, DELETE, OPTIONS", "AccessControlAllowCredentials": true }; /** * Headers */ res.header("Access-Control-Allow-Credentials", responseSettings.AccessControlAllowCredentials); res.header("Access-Control-Allow-Origin", responseSettings.AccessControlAllowOrigin); res.header("Access-Control-Allow-Headers", (req.headers['access-control-request-headers']) ? req.headers['access-control-request-headers'] : "x-requested-with"); res.header("Access-Control-Allow-Methods", (req.headers['access-control-request-method']) ? req.headers['access-control-request-method'] : responseSettings.AccessControlAllowMethods); if ('OPTIONS' == req.method) { res.send(200); } else { next(); } }); 

Puede usar “$ http.jsonp”

O

A continuación se muestra el trabajo en torno a Chrome para las pruebas locales

Debes abrir tu Chrome con el siguiente comando. (Presione ventana + R)

 Chrome.exe --allow-file-access-from-files 

Nota: Su Chrome no debe estar abierto. Cuando ejecutas este comando, Chrome se abrirá automáticamente.

Si está ingresando este comando en el símbolo del sistema, seleccione su directorio de instalación de Chrome y luego use este comando.

Debajo del código del script para abrir Chrome en MAC con “–allow-file-access-from-files”

 set chromePath to POSIX path of "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" set switch to " --allow-file-access-from-files" do shell script (quoted form of chromePath) & switch & " > /dev/null 2>&1 &" 

segundas opciones

Solo puede usar abrir (1) para agregar los indicadores: abrir -a ‘Google Chrome’ –args –allow-file-access-from-files

 /** * Allow cross origin to access our /public directory from any site. * Make sure this header option is defined before defining of static path to /public directory */ expressApp.use('/public',function(req, res, next) { res.setHeader("Access-Control-Allow-Origin", "*"); // Request headers you wish to allow res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); // Set to true if you need the website to include cookies in the requests sent res.setHeader('Access-Control-Allow-Credentials', true); // Pass to next layer of middleware next(); }); /** * Server is about set up. Now track for css/js/images request from the * browser directly. Send static resources from "./public" directory. */ expressApp.use('/public', express.static(path.join(__dirname, 'public'))); 
 If you want to set Access-Control-Allow-Origin to a specific static directory you can set the following. 
 //Add following code in app.js of NODEJ Restful api to avoid "Access-Control-Allow-Origin" error in angular 6 or any other framework var express = require('express'); var app = express(); var cors = require('cors'); var bodyParser = require('body-parser'); //enables cors app.use(cors({ 'allowedHeaders': ['sessionId', 'Content-Type'], 'exposedHeaders': ['sessionId'], 'origin': '*', 'methods': 'GET,HEAD,PUT,PATCH,POST,DELETE', 'preflightContinue': false })); 

Instale la dependencia de cors en su proyecto:

 npm i --save cors 

Agregue a su archivo de configuración del servidor lo siguiente:

 var cors = require('cors'); app.use(cors()); 

Funciona para mí con la versión 2.8.4 cors.