Sem 'Acesso-controle-permissão-origem' - Problema na porta do nó / Apache

Eu criei uma pequena API usando o Node / Express e tentando extrair dados usando o Angularjs, mas como minha página html está sendo executada no apache no localhost: 8888 e a API do nó está escutando na porta 3000, estou recebendo o No 'Access-Control- Allow-Origin '. Eu tentei usar o node-http-proxyVhosts Apache, mas não tendo muito sucesso, veja o código e o erro completo abaixo.

XMLHttpRequest não pode carregar localhost: 3000. Nenhum cabeçalho 'Access-Control-Allow-Origin' está presente no recurso solicitado. Portanto, 'localhost local: 8888' de origem não é permitido. "

// 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')

Código angular

angular.module('contractorsApp', [])
.controller('ContractorsCtrl', function($scope, $http,$routeParams) {

   $http.get('localhost:3000').then(function(response) {
       var data = response.data;
       $scope.contractors = data;
   })

HTML

<body ng-app="contractorsApp">
    <div ng-controller="ContractorsCtrl"> 
        <ul>
            <li ng-repeat="person in contractors">{{person.name}}</li>
        </ul>
    </div>
</body>

Tente adicionar o seguinte middleware ao seu aplicativo NodeJS / Express (adicionei alguns comentários para sua conveniência):

// 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 (e.g. in case you use sessions)
    res.setHeader('Access-Control-Allow-Credentials', true);

    // Pass to next layer of middleware
    next();
});

Espero que ajude!

A resposta aceita é boa. Caso prefira algo mais curto, você pode usar um plugin chamado cors disponível para o Express.js

É simples de usar, neste caso em particular:

var cors = require('cors');

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

Outra maneira, é simplesmente adicionar os cabeçalhos à sua rota:

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:)');
});

A resposta principal funcionou bem para mim, exceto que eu precisava colocar mais de um domínio na lista de permissões.

Além disso, a resposta principal sofre com o fato de a OPTIONSsolicitação não ser tratada pelo middleware e você não a receber automaticamente.

Eu armazeno domínios allowed_originsna lista de permissões como na configuração do Express e coloco o domínio correto de acordo com o origincabeçalho, pois Access-Control-Allow-Originnão permite especificar mais de um domínio.

Aqui está o que eu acabei com:

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);
});

O código de resposta permite apenas localhost: 8888. Este código não pode ser implantado na produção ou em um nome de servidor e porta diferente.

Para fazê-lo funcionar em todas as fontes, use isto:

// 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 (e.g. in case you use sessions)
    res.setHeader('Access-Control-Allow-Credentials', true);

    // Pass to next layer of middleware
    next();
});

Instale a dependência de cors no seu projeto:

npm i --save cors

Adicione ao seu arquivo de configuração do servidor o seguinte:

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

Funciona para mim com a versão 2.8.4 cors.

Isso funcionou para mim.

app.get('/', function (req, res) {

    res.header("Access-Control-Allow-Origin", "*");
    res.send('hello world')
})

Você pode alterar * para atender às suas necessidades. Espero que isso possa ajudar.

Oi, isso acontece quando o front-end e o back-end estão sendo executados em portas diferentes. O navegador bloqueia as respostas do back-end devido à ausência nos cabeçalhos do CORS. A solução é fazer adicionar os cabeçalhos CORS na solicitação de back-end. A maneira mais fácil é usar o pacote cors npm.

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

Isso permitirá os cabeçalhos CORS em todas as suas solicitações. Para mais informações, consulte a documentação do cors

https://www.npmjs.com/package/cors

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();
    }


});

Adicione o seguinte código no app.js da API NODEJ Restful para evitar o erro "Access-Control-Allow-Origin" no angular 6 ou em qualquer outra estrutura

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
}));

Você pode usar "$ http.jsonp"

OU

Abaixo está a solução alternativa para o chrome para testes locais

Você precisa abrir o chrome com o seguinte comando. (Pressione janela + R)

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

Nota: seu chrome não deve estar aberto. Quando você executa este comando, o chrome será aberto automaticamente.

Se você estiver inserindo esse comando no prompt de comando, selecione o diretório de instalação do chrome e use este comando.

Abaixo do código de script para o chrome aberto no MAC com "--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 opções

Você pode simplesmente usar o open (1) para adicionar os sinalizadores: open -a 'Google Chrome' --args --allow-file-access-from-files