如何将 CORS-Headers 添加到静态连接服务器？

Posted 2023-03-04

【中文标题】如何将 CORS-Headers 添加到静态连接服务器？

【英文标题】：How can I add CORS-Headers to a static connect server?

【发布时间】：2013-06-12 01:17:48

【问题描述】：

我正在编写一个提供静态 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调用？

【参考方案1】：

因为express 宠坏了我，所以想弄清楚这个有点麻烦。

看看enable cors。基本上您需要做的是将Access-Control-Allow-Origin 添加到您要启用cors 的域中。 response.setHeaders 非常适合这项任务。

另外需要注意的是 connect 没有办法处理路由。如果您的应用程序需要不同的路由，那么您可能必须为每个路由编写逻辑，并将 res 标头添加到要启用 cors 的那些标头。你可以使用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 开发工具中得到的响应

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

【讨论】：

非常感谢，绝对完美！

【参考方案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?

【讨论】：

res.header 必须是 res.setHeader 用于连接中间件 2.0 及更高版本

【参考方案3】：

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，正在发送的文件的统计对象。

我希望该请求在此处可用，以便我可以根据 Origin 标头有条件地设置 CORS 标头。

【参考方案4】：

如果您使用 gulp，最简单的方法是使用名为“gulp-connect”和“connect-modrewrite”的 gulp 插件，并定义一个新的 gulptask 来重定向特定的 api。 这是为了让 apache 充当特定 api 的代理，绕过飞行前请求，以避免 CORs 问题。 我使用以下 gulp 任务来解决这个问题。

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]'
        ])
      ];
    
  );
);