为什么不添加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块设置标题?

当前回答

您可以使用Express中间件，阻止您的域和方法。

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", process.env.DOMAIN); // update to match the domain you will make the request from
  res.header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE");
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  next();
});

2019-09-06 11:22:30

其他回答

使用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

/*首先，这可能是像我这样的初级开发人员的问题:确保在你的fetch方法中使用“lambda”>>>>“'”而不是“'”!* /

const response = await fetch(https://api....);

/plus，强烈推荐以下文章:https://developer.edamam.com/api/faq/

2020-02-01 11:06:28

最简单的方法是在项目中使用以下方法安装cors模块:

npm i --save cors

然后在你的服务器文件中使用以下方法导入它:

import cors from 'cors';

然后简单地像这样使用它作为中间件:

app.use(cors());

希望这能有所帮助!

2019-04-20 03:53:55

我已经做了一个更完整的中间件，适合表达或连接。它支持飞行前检查的OPTIONS请求。请注意，它将允许CORS访问任何内容，如果您想限制访问，则可能需要进行一些检查。

app.use(function(req, res, next) {
    var oneof = false;
    if(req.headers.origin) {
        res.header('Access-Control-Allow-Origin', req.headers.origin);
        oneof = true;
    }
    if(req.headers['access-control-request-method']) {
        res.header('Access-Control-Allow-Methods', req.headers['access-control-request-method']);
        oneof = true;
    }
    if(req.headers['access-control-request-headers']) {
        res.header('Access-Control-Allow-Headers', req.headers['access-control-request-headers']);
        oneof = true;
    }
    if(oneof) {
        res.header('Access-Control-Max-Age', 60 * 60 * 24 * 365);
    }

    // intercept OPTIONS method
    if (oneof && req.method == 'OPTIONS') {
        res.send(200);
    }
    else {
        next();
    }
});

2012-10-30 21:49:20

express + node +离子在不同端口运行时进行测试。

Localhost: 8100

Localhost: 5000

// CORS (Cross-Origin Resource Sharing) headers to support Cross-site HTTP requests

app.all('*', function(req, res, next) {
       res.header("Access-Control-Allow-Origin", "*");
       res.header("Access-Control-Allow-Headers", "X-Requested-With");
       res.header('Access-Control-Allow-Headers', 'Content-Type');
       next();
});

2014-11-08 20:35:20

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

推荐文章

最新文章

标签