node.js의 express.js 프레임 워크에서 교차 출처 리소스 공유 (CORS)를 활성화하는 방법

나는 크로스 도메인 스크립팅을 지원하는 node.js에서 웹 서버를 구축하는 동시에 공개 디렉토리에서 정적 파일을 제공하려고합니다. express.js를 사용하고 있으며 교차 도메인 스크립팅 ( Access-Control-Allow-Origin: *) 을 허용하는 방법을 잘 모르겠습니다 .

이 게시물을 보았지만 도움이되지 않았습니다.

var express = require('express')
  , app = express.createServer();

app.get('/', function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    next();
});

app.configure(function () {
    app.use(express.methodOverride());
    app.use(express.bodyParser());
    app.use(app.router);
});

app.configure('development', function () {

    app.use(express.static(__dirname + '/public'));
    app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});

app.configure('production', function () {


    var oneYear = 31557600000;
    //    app.use(express.static(__dirname + '/public', { maxAge: oneYear }));
    app.use(express.static(__dirname + '/public'));
    app.use(express.errorHandler());
});

app.listen(8888);
console.log('express running at http://localhost:%d', 8888);

enable-cors.org에서 예제를 확인하십시오 .

node.js의 ExpressJS 앱에서 경로로 다음을 수행하십시오.

app.all('/', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  next();
 });

app.get('/', function(req, res, next) {
  // Handle the get for this route
});

app.post('/', function(req, res, next) {
 // Handle the post for this route
});

첫 번째 호출 ( app.all)은 앱의 다른 모든 경로 (또는 최소한 CORS를 활성화하려는 경로)보다 먼저 이루어져야합니다.

[편집하다]

헤더가 정적 파일에도 표시되도록하려면 다음을 시도하십시오 (다음을 호출하기 전에 있는지 확인) use(express.static()).

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  next();
});

코드로 이것을 테스트하고 public디렉토리 에서 자산에 대한 헤더를 얻었습니다 .

var express = require('express')
  , app = express.createServer();

app.configure(function () {
    app.use(express.methodOverride());
    app.use(express.bodyParser());
    app.use(function(req, res, next) {
      res.header("Access-Control-Allow-Origin", "*");
      res.header("Access-Control-Allow-Headers", "X-Requested-With");
      next();
    });
    app.use(app.router);
});

app.configure('development', function () {
    app.use(express.static(__dirname + '/public'));
    app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});

app.configure('production', function () {
    app.use(express.static(__dirname + '/public'));
    app.use(express.errorHandler());
});

app.listen(8888);
console.log('express running at http://localhost:%d', 8888);

물론 함수를 모듈로 패키징하여 다음과 같은 작업을 수행 할 수 있습니다.

// cors.js

module.exports = function() {
  return function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    next();
  };
}

// server.js

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

@Michelle Tilley 솔루션에 따라 처음에는 저에게 효과적이지 않았습니다. 왜 그런지 모르겠지만 크롬과 다른 버전의 노드를 사용하고 있습니다. 약간의 조정을 한 후 지금은 저에게 효과적입니다.

app.all('*', function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

누군가 나와 비슷한 문제에 직면 한 경우 도움이 될 수 있습니다.

이 cors npm 모듈을 시도하십시오 .

var cors = require('cors')

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

이 모듈은 도메인 화이트 리스팅, 특정 API에 대한 cors 활성화 등과 같은 cors 설정을 미세 조정하는 많은 기능을 제공합니다.

나는 이것을 사용한다 :

var app = express();

app
.use(function(req, res, next){
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'X-Requested-With');
    next();
})
.options('*', function(req, res, next){
    res.end();
})
;

h.readFiles('controllers').forEach(function(file){
  require('./controllers/' + file)(app);
})
;

app.listen(port);
console.log('server listening on port ' + port);

이 코드는 컨트롤러가 controllers 디렉토리에 있다고 가정합니다. 이 디렉토리의 각 파일은 다음과 같아야합니다.

module.exports = function(app){

    app.get('/', function(req, res, next){
        res.end('hi');
    });

}

cors express 모듈 사용을 권장 합니다. 이를 통해 도메인을 허용 목록에 추가하고 특정 경로에 대한 도메인을 허용 / 제한 할 수 있습니다.

Access-Control-Allow-Credentials: true"Credentials"를 통해 "cookie"를 사용 하려면을 설정해야합니다.

app.all('*', function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Credentials', true);
  res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

app.use(function(req, res, next) {
var allowedOrigins = [
  "http://localhost:4200"
];
var origin = req.headers.origin;
console.log(origin)
console.log(allowedOrigins.indexOf(origin) > -1)
// Website you wish to allow to
if (allowedOrigins.indexOf(origin) > -1) {
  res.setHeader("Access-Control-Allow-Origin", origin);
}

// res.setHeader("Access-Control-Allow-Origin", "http://localhost:4200");

// 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,Authorization"
);

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

});

이 코드를 index.js 또는 server.js 파일에 추가하고 요구 사항에 따라 허용 된 원본 배열을 변경합니다.

내가 취해야 할 한 가지 추가 단계는 내 URL을 http://localhost에서http://127.0.0.0