'Access-Control-Allow-Origin' Yok - Düğüm / Apache Bağlantı Noktası Sorunu


260

Node / Express kullanarak küçük bir API oluşturdum ve Angularjs kullanarak veri çekmeye çalışıyorum ama benim html sayfam localhost üzerinde apache altında çalışıyor: 8888 ve düğüm API port 3000'de dinliyor, No 'Access-Control- -Origin izin verin. Kullanmayı denedim node-http-proxyve Vhosts Apache, ancak çok fazla başarıya sahip değil, lütfen aşağıdaki hataya ve koda bakın.

XMLHttpRequest localhost yükleyemiyor: 3000. İstenen kaynakta 'Access-Control-Allow-Origin' başlığı yok. Bu nedenle 'localhost: 8888' kaynağına erişime izin verilmiyor. "

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

Açısal kod

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>

Yanıtlar:


622

NodeJS / Express uygulamanıza aşağıdaki ara yazılımları eklemeyi deneyin (Size kolaylık sağlamak için bazı yorumlar ekledim):

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

Umarım yardımcı olur!


2
Tam olarak nereye gittiğini belirlemenize yardımcı olabilir misiniz? Sunucumda aşağıdaki kod var. Bundan hemen sonra mı gidiyor? var app = requir ('ekspres') (), sunucu = requir ('http'). createServer (app), io = requir ('socket.io'). listen (sunucu), request = requir ("istek") , url = zorunlu ("url"); server.listen (6969); // buraya mı gidiyor? yeni bir hatta mı?
Art Geigel

1
@jvandemo app.get ('/', işlev (req, res) 'i ... işlev (req, res, sonraki) olarak değiştirmek
zorunda mıyım

10
Şimdiye kadar benim en sevdiğim kişisin. Teşekkür ederim. Bu kodun, benim gibi yeni başlayanlar için rotalar tanımlanmadan önce olması gerektiğini not edebilir miyiz?
gegillam

1
İstek modülünü kullanırken bu işlem nasıl yapılır?
Rohit Tigga

2
Benim durumumda işe yaramadı. Yine de bu hatayı alıyorum: "Ön kontrol isteğine yanıt erişim denetimi denetimini geçmiyor: İstenen kaynakta 'Erişim-Denetim-İzin Verme Kökenli' üstbilgisi yok. Bu nedenle ' abc.xyz.net:212 ' kaynağına izin verilmiyor Yanıt HTTP HTTP 500 koduna sahipti. "
user1451111

96

Kabul edilen cevap iyidir, daha kısa bir şey tercih etmeniz durumunda, Express.js için mevcut olan cors adlı bir eklenti kullanabilirsiniz.

Bu özel durum için kullanımı kolaydır:

var cors = require('cors');

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

3
{origin: 'null'}Çalışması için kullanmak zorunda kaldım ... Görünüşe göre, tarayıcım nullorijin mi gönderiyor ?
Ricardo Cruz

2
Neden tekerleği yeniden icat ettiniz? Kod pasajına kıyasla her zaman paketli bir çözüm için kullanıyorum
Pierre

farklı kökenlerden farklı yöntemler istemek benim kullanım davasını ele oldukça güzel tatlı küçük kütüphane ... ve bakarak sonraki adam için daha az kod yorgunluğu.
Kyle Baker

6
Teşekkürler, etkinleştirmek-corsapp.use(cors({origin: '*'})); göre, benim için çalıştı .
danialk

2
Daha iyi kullanmak için npm cors sayfasına göz atmanızı öneririm . Benim için işleri çok netleştirdi =).
13013SwagR

30

Başka bir yol da, rotanıza başlıklar eklemektir:

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

8
)Smiley beni
şaşırttı

17

En iyi yanıt benim için iyi çalıştı, ancak birden fazla alan adını beyaz listeye eklemem gerekiyordu.

Ayrıca, en iyi yanıt, OPTIONSisteğin ara katman yazılımı tarafından ele alınmaması ve otomatik olarak almamanızdan muzdariptir .

Beyaz listeye alınmış alanları allowed_originsExpress yapılandırmasında olduğu gibi saklarım ve birden fazla alan belirtilmesine izin vermediğinden originbaşlığa göre doğru alan adını Access-Control-Allow-Originkoyarım.

İşte sonuçta:

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

Bu aynı 'if (app.get (' izin verilen kökenler '). İndexOf (origin)! == - 1)?'?
Rune Jeppesen

13

Yanıt kodu yalnızca localhost'a izin verir: 8888. Bu kod üretime veya farklı sunucu ve bağlantı noktası adına dağıtılamaz.

Tüm kaynaklarda çalışmasını sağlamak için şunu kullanın:

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

2
Bu benim için işe yaramıyor! "* geçerli bir kaynak değil". Görünüşe göre * karakteri joker karakter olarak tanınmıyor.
Francesco

Benim için çalışıyor. yani joker karakter '*' kullanarak. hem krom hem de safari için çalışır.
AnBisw

Teşekkürler;) İyi çalışıyor
Mauro

9

Projenize cors bağımlılığını yükleyin:

npm i --save cors

Sunucu yapılandırma dosyanıza aşağıdakileri ekleyin:

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

2.8.4 cors versiyonu ile benim için çalışıyor.


"cors": "^2.8.5", "express": "^4.16.3",@monikaja önerilen hattı ile iyi çalışıyor. Teşekkürler!
RamiroIsBack

Bunun yaptığı şey, tüm kökenlerin / alan adlarının uygulamaya erişmesini sağlamaktır ve bu genellikle yapmak istemediğiniz bir şeydir. Bunun yerine, yalnızca izin verilen alanları belirtin.
Lacho Tomov

7

Bu benim için çalıştı.

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

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

İhtiyaçlarınıza göre * değiştirebilirsiniz. Umarım bu yardımcı olabilir.


7

Merhaba, ön uç ve arka uç farklı bağlantı noktalarında çalışırken bu olur. Tarayıcı, CORS başlıklarında bulunmaması nedeniyle arka uçtan gelen yanıtları engeller. Çözüm, arka uç isteğinde CORS başlıklarını eklemektir. En kolay yol cors npm paketini kullanmaktır.

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

Bu, tüm isteğinizde CORS başlıklarını etkinleştirir. Daha fazla bilgi için cors belgelerine bakabilirsiniz.

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


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


});

2

Açısal 6 veya başka bir çerçevede "Access-Control-Allow-Origin" hatasını önlemek için NODEJ Restful api'nin app.js dosyasına aşağıdaki kodu ekleyin

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

1

"$ Http.jsonp" kullanabilirsiniz

VEYA

Yerel test için krom için yapılan çözüm aşağıdadır

Chrome'unuzu aşağıdaki komutla açmanız gerekir. (Pencere + R'ye basın)

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

Not: Kromunuz açık olmamalıdır. Bu komutu çalıştırdığınızda krom otomatik olarak açılır.

Bu komutu komut istemine giriyorsanız, krom kurulum dizininizi seçin ve bu komutu kullanın.

"--Allow-file-access-from-files" ile MAC'ta açık krom için komut dosyası kodunun altında

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 &"

ikinci seçenekler

Bayrakları eklemek için sadece open (1) kullanabilirsiniz: open -a 'Google Chrome' --args --allow-file-access-from-files


MAC'a ne dersin ?? Chrome.exe
user1336103

/ Applications / Google \ Chrome.app/Contents/MacOS/Google \ Krom --allow-dosya access-from-files açık krom yönetmek ancak ileti hala XMLHttpRequest yükleyemiyor" gösteriyor localhost: 3000 . Kökeni localhost'a: 8888 olduğunu Access-Control-Allow-Origin tarafından izin verilmiyor. "
user1336103 19:13

+1 Bunun Mac seçeneği ile çalıştığını 'open' kullanarak onaylayabilirim. Sadece yerel JSON dosyalarına erişen tamamen indirilmiş bir siteyi test ettiğim için durumum biraz farklı.
sünger

0

/**
 * 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.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.