在使用 node.js 和 Express 构建的 api 中使用 cors 中间件时出现 CORS 错误

Posted

技术标签:

【中文标题】在使用 node.js 和 Express 构建的 api 中使用 cors 中间件时出现 CORS 错误【英文标题】:CORS error when use cors middleware in an api built with node.js and Express 【发布时间】:2018-12-15 11:46:22 【问题描述】:

我是 node 和 express 的新手。我在构建一个非常简单的 API 时遇到了一个 cors 错误。我已经尝试了几个小时以不同的方法解决它,但这些都不起作用。

这是我的方法

const functions = require('firebase-functions');
const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors( origin: true ));

app.get('/api', (req, res) => 
  res.send('Hello');
);

exports.api = functions.https.onRequest(app);

并得到 4 个错误: Access-Control-Allow-Origin 不允许http://localhost:3000。

我还尝试了其他几种方法:

var allowCrossDomain = function(req, res, next) 
    res.header("Access-Control-Allow-Origin", "*");
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Cache-Control");
    next();
;
app.use(allowCrossDomain);

这给了我同样的错误。 我正在使用 Firebase Cloud Function 来部署这个 api,因为代码非常简单,所以我真的不知道哪个部分做得不对。

【问题讨论】:

【参考方案1】:

CORS 总是一个棘手的问题,但在这种情况下,我想我可能会提供帮助。当您运行 firebase deploy 时,您应该会看到您的端点已部署。如果这是您第一次部署该函数,它应该在控制台中打印出该新函数的完整 URL,它通常看起来像这样:

https://us-central1-your-project-name.cloudfunctions.net/apiEndpointName

如果您已经部署了它,您可以在 Firebase 控制台 -> 函数 -> 仪表板中看到该函数的完整 URL

该 URL 是该函数的普通公共 API 端点或“HTTP 触发器”。如果您使用 Postman 向该 URL 发出 GET 请求,您应该会收到 Hello 响应。 (或者,如果您在浏览器中访问了该 URL,您的浏览器会向该 URL 发出 GET 请求,您也应该在那里得到您的 Hello 响应

当您想从部署/托管的网站访问它时,问题就来了。您需要告诉 Firebase 的托管部分将 /api 的任何流量路由到您的函数 - 您的 Firebase 托管应该尝试将 /api 路由解析为同时部署的普通 html 页面主 index.html 文件...相反,它应该将 /api 的任何流量引导到云函数 api

因此,您需要告诉 Firebase 将 /api 的所有流量定向到云功能,而不是托管。您在 firebase.json 文件中提供 Firebase 命令/配置...在这种情况下,在名为“rewrites”的部分下,如下所示:


  "hosting": 
    "public": "public",

    // Add the following rewrites section *within* "hosting"
    "rewrites": [ 
      "source": "/bigben", "function": "bigben"
     ]

  

查看this documentation link,它解释了所有这些^^

完成后,重新部署所有内容,现在您应该可以在浏览器中访问/api 并触发该功能。 注意 除非您使用firebase serve,否则您应该访问已部署网站 上的路由,而不是本地主机。在firebase serve 上查看this link for more details。

【讨论】:

以上是关于在使用 node.js 和 Express 构建的 api 中使用 cors 中间件时出现 CORS 错误的主要内容,如果未能解决你的问题,请参考以下文章

从 node.js/express.js 中的多个异步源构建对象

使用 passport.js 和 express.js (node.js) 制作安全的 oauth API

使用 Visual Studio 2012 express 进行 TypeScript、node.js 开发

使用 Node.js、Handlebars 和 Express 进行模板继承

使用 Node.Js、Express 和 EJS 在索引页面的不同部分显示博客文章

脊椎、node.js (express) 和 Access-Control-Allow-Origin