web-dev-qa-db-ja.com

CORSヘッダーを静的接続サーバーに追加するにはどうすればよいですか？

静的な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呼び出しを実行できるように、サーバーの応答に

node.jscorsnode.js-connect
24
afx

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
18
Akshat Jiwan Sharma

これが役立つことを願っています：

//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を許可する方法

6
qwe123wsx

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ヘッダーを条件付きで設定できるように、ここでリクエストが利用可能であることを望みます。

3
Carl G

最も簡単な方法は、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]'
        ])
      ];
    }
  });
});
2
vmathew