为什么不添加CORS头选项路由允许浏览器访问我的API?

我试图在使用Express.js web框架的Node.js应用程序中支持CORS。我已经阅读了谷歌关于如何处理这个问题的小组讨论，并阅读了一些关于CORS如何工作的文章。首先，我这样做(代码是用CoffeeScript语法写的):

app.options "*", (req, res) ->
  res.header 'Access-Control-Allow-Origin', '*'
  res.header 'Access-Control-Allow-Credentials', true
  # try: 'POST, GET, PUT, DELETE, OPTIONS'
  res.header 'Access-Control-Allow-Methods', 'GET, OPTIONS'
  # try: 'X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept'
  res.header 'Access-Control-Allow-Headers', 'Content-Type'
  # ...

这似乎不管用。似乎我的浏览器(Chrome)没有发送最初的选项请求。当我刚刚更新了块的资源，我需要提交一个跨起源GET请求:

app.get "/somethingelse", (req, res) ->
  # ...
  res.header 'Access-Control-Allow-Origin', '*'
  res.header 'Access-Control-Allow-Credentials', true
  res.header 'Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, OPTIONS'
  res.header 'Access-Control-Allow-Headers', 'Content-Type'
  # ...

它工作(在Chrome)。这也适用于Safari。

我听说……

在实现CORS的浏览器中，每个跨源GET或POST请求之前都有一个OPTIONS请求，用于检查GET或POST是否正常。

所以我的主要问题是，为什么这种情况在我身上没有发生?为什么我的app。options块没有被调用?为什么我需要在我的主app.get块设置标题?

当前回答

如果我是你@OP，我会改变我的编程模式。

假设这些CORS被阻止，因为您正在向localhost或类似的东西发出请求。

最终，如果你打算将optoin部署到生产环境中，比如谷歌云平台或Heroku，你将不必担心CORS，比如在生产环境中允许起源或其他问题。

所以当测试服务器时，只要使用postman，你就不会得到CORS阻塞，然后部署你的服务器，然后在你的客户端上工作。

2019-08-17 17:45:52

其他回答

如果你想让它特定于控制器，你可以使用:

res.setHeader("X-Frame-Options", "ALLOWALL");
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader("Access-Control-Allow-Methods", "POST, GET");
res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

请注意，这也将允许iframes。

2018-01-05 22:01:59

这对我来说是有效的，因为它是一个很容易实现的路由，im使用meanjs和它的工作精细，safari, chrome等。

app.route('/footer-contact-form').post(emailer.sendFooterMail).options(function(req,res,next){ 
        res.header('Access-Control-Allow-Origin', '*'); 
        res.header('Access-Control-Allow-Methods', 'GET, POST');
        res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
        return res.send(200);

    });

2015-08-24 20:13:59

这与Pat的回答相似，不同之处在于我用res.sendStatus(200)结束;而不是next();

代码将捕获方法类型OPTIONS的所有请求，并返回access-control-headers。

app.options('/*', (req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');
    res.sendStatus(200);
});

代码接受问题中要求的所有来源的CORS。但是，最好将*替换为特定的来源，即http://localhost:8080，以防止误用。

因为我们使用的是app.options-method而不是app.use-method，所以我们不需要做这样的检查:

req.method === 'OPTIONS'

我们可以从其他答案中看到。

我在这里找到了答案:http://johnzhang.io/options-request-in-express。

2019-01-17 10:39:29

使用Express Middleware非常适合我。如果您已经在使用Express，只需添加以下中间件规则。它应该开始工作了。

app.all("/api/*", function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Cache-Control, Pragma, Origin, Authorization, Content-Type, X-Requested-With");
  res.header("Access-Control-Allow-Methods", "GET, PUT, POST");
  return next();
});

app.all("/api/*", function(req, res, next) {
  if (req.method.toLowerCase() !== "options") {
    return next();
  }
  return res.send(204);
});

参考

2018-08-29 18:29:52

尝试将控制权传递给下一个匹配的路由。如果Express首先匹配app.get路由，那么它不会继续到options路由，除非你这样做(注意使用next):

app.get('somethingelse', function(req, res, next) {
    //..set headers etc.

    next();
});

在组织CORS的东西方面，我把它放在一个对我来说很有效的中间件中:

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

    next();
}

//...
app.configure(function() {
    app.use(express.bodyParser());
    app.use(express.cookieParser());
    app.use(express.session({ secret: 'cool beans' }));
    app.use(express.methodOverride());
    app.use(allowCrossDomain);
    app.use(app.router);
    app.use(express.static(__dirname + '/public'));
});

2011-08-15 19:45:34

为什么不添加CORS头选项路由允许浏览器访问我的API?

推荐文章

最新文章

标签