静的なhtml、css、javascriptを配信する小さなデモWebサーバーを書いています。サーバーは次のようになります
(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');
});
})();
クライアント側のJavaScriptが別のサーバーにajax呼び出しを行います。追加する方法
Access-Control-Allow-Origin: http://example.com
クライアント側のJavaScriptがajax呼び出しを実行できるように、サーバーの応答に
express が私を台無しにしているので、これを理解するのに少し問題がありました。
enable cors を見てください。基本的には、corsを有効にするドメインにAccess-Control-Allow-Origin
を追加する必要があります。 response.setHeaders はこのタスクに最適です。
注意すべきもう1つの点は、接続にはルートを処理する方法がないことです。アプリに異なるルートを設定する必要がある場合は、おそらくそれらのそれぞれにロジックを記述し、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');
});
これは私がchrome dev toolsで受け取った応答です
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
これが役立つことを願っています:
//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'));
});
詳細: CORSを許可する方法
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ヘッダーを条件付きで設定できるように、ここでリクエストが利用可能であることを望みます。
最も簡単な方法は、gulpを使用している場合、「gulp-connect」および「connect-modrewrite」と呼ばれるgulpプラグインを使用し、新しいgulptaskを定義して特定のAPIをリダイレクトすることです。これは、CORsの問題を回避するために、Apacheを特定のAPIのプロキシとして機能させ、プリフライトリクエストをバイパスするためです。この問題を克服するために、私は次のぐちゃぐちゃなタスクを使いました。
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]'
])
];
}
});
});