어떻게 CORS 헤더를 정적 연결 서버에 추가 할 수 있습니까?

Question

정적 html, css 및 javascript를 제공하는 데모 웹 서버를 작성 중입니다. 아약스를 만드는 자바 스크립트

(function() { 
    "use strict"; 

    var http = require("http"); 
    var connect = require('connect'); 
    var app = connect() 
     .use(connect.logger('dev')) 
     .use(connect.static('home')); 

    var server = http.createServer(app); 
    server.listen(9999, function() { 
     console.log('server is listening'); 
    }); 
})(); 

내 클라이언트 측에서 다른 서버로 호출처럼 서버 보인다. 어떻게 있도록 내 서버 응답에

Access-Control-Allow-Origin: http://example.com 

를 추가 아약스 전화를 할 수있는 자바 스크립트 클라이언트 측? 수

Answer 1

express이 나를 괴롭 히고 있기 때문에이 문제를 해결하는 데 약간의 어려움이있었습니다.

enable cors을 살펴보십시오. 기본적으로해야 할 일은 활성화 할 도메인에 Access-Control-Allow-Origin을 추가하는 것입니다. response.setHeaders은이 작업에 적합합니다.

또 다른 주목할 점은 connect가 라우트를 처리 할 방법이 없다는 것입니다. 앱에 다른 경로가 필요한 경우 각 애플리케이션에 대한 로직을 작성하고 cors를 사용하려는 호스트에 res 헤더를 추가해야합니다. 그것에 대해 req.url을 사용할 수 있습니다.

var http = require("http"); 
var connect = require('connect'); 

var app = connect() 

    .use(connect.logger('dev')) 

    .use(connect.static('home')) 

    .use(function(req, res){ 

    res.setHeader("Access-Control-Allow-Origin", "http://example.com"); 
    res.end('hello world\n'); 

}); 

var server = http.createServer(app); 

server.listen(9999, function() { 

    console.log('server is listening'); 
}); 

이 크롬 개발 도구에서 내가 가진 응답이

HTTP/1.1 200 OK 
Access-Control-Allow-Origin: http://example.com 
Date: Sat, 15 Jun 2013 16:01:59 GMT 
Connection: keep-alive 
Transfer-Encoding: chunked 

Answer 2

난이 도움이되기를 바랍니다 :

//CORS middleware 
var allowCrossDomain = function(req, res, next) { 
    res.header('Access-Control-Allow-Origin', config.allowedDomains); 
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE'); 
    res.header('Access-Control-Allow-Headers', 'Content-Type'); 

    next(); 
} 

//... 
app.configure(function() { 

    app.use(allowCrossDomain); 
    app.use(express.static(__dirname + '/public')); 
}); 

더 자세히 : How to allow CORS?

Answer 3

가장 쉬운 방법, 꿀꺽 꿀꺽 사용하는 경우 "gulp-connect"라는 꿀꺽 꿀꺽 플러그인을 사용하는 것입니다. d "connect-modrewrite"를 지정하고 특정 API를 리디렉션하도록 새 조각을 정의합니다. 이것은 아파치가 특정 api에 대한 프록시 역할을하도록하고, COR 문제를 피하기 위해 비행 전 요청을 우회합니다. 이 문제를 극복하기 위해 다음과 같은 꿀꺽 꿀꺽한 작업을 사용했습니다.

var connect = require('gulp-connect'), 
    modRewrite = require('connect-modrewrite'); 
/** 
* Proxy Config 
*/ 
gulp.task('connect', function() { 
    connect.server({ 
    root: ['./.tmp', './.tmp/{folderLocations}', './src', './bower_components'], 
    port: 9000, 
    livereload: true, 
    middleware: function (connect, opt) { 
     return [ 
     modRewrite([ 
      '^/loginProxy/(.*)$ http://app.xyzdomain.com/service/login/auth/$1 [P]' 
     ]) 
     ]; 
    } 
    }); 
}); 

Answer 4

express.static은 구성 개체를 사용합니다. 당신은 속성을 제공 할 수 setHeaders 그 함수에서 당신은 응답 헤더를 설정할 수 있습니다 :이 기능에

app.use(express.static('public', { 
     setHeaders: function setHeaders(res, path, stat) { 
     res.header('Access-Control-Allow-Origin', '*'); 
     res.header('Access-Control-Allow-Methods', 'GET'); 
     res.header('Access-Control-Allow-Headers', 'Content-Type'); 
     } 
    })) 

매개 변수는 다음과 같습니다

• res, 응답 객체입니다.
• path, 보내는 파일 경로.
• stat, 보내는 파일의 stat 개체.

Origin 헤더를 기반으로 CORS 헤더를 조건부로 설정할 수 있도록 여기에 요청을 보내시기 바랍니다.