Angular CORS 和工作流程答案

【问题标题】：Angular CORS and workflowAngular CORS 和工作流程
【发布时间】：2022-08-17 23:16:12
【问题描述】：

我在端口 4200 上有一个 Angular 应用程序。我在端口 300 上有节点服务器。我正在遵循 MEAN 堆栈指南。为了允许 CORS，它建议将其添加到服务器响应中：

app.use((req, res, next) => {
  res.setHeader(\"Access-Control-Allow-Origin\", \"*\");
  res.setHeader(
    \"Access-Control-Allow-Headers\",
    \"Origin, X-Requested-With, Content-Type, Accept\"
  );
  res.setHeader(
    \"Access-Control-Allow-Methods\",
    \"GET, POST, PATCH, DELETE, OPTIONS\"
  );
  next();
});

我有两个问题：

这对部署安全吗？
这是在开发过程中从服务器访问数据的推荐工作流程吗？如果它这么简单，那么使用 Angular 的 in-memory-web-api-module 有什么意义呢？

通常您使用express cors middleware
对于您的问题：1）要判断这是否安全（甚至是必要的），您必须了解 CORS 是什么（阅读它）并决定您的应用程序是否需要它。通常，当您从不同来源提供 API 和前端时，您需要 CORS。到什么级别（即允许所有来源与仅允许特定来源）取决于您的应用程序 2) in-memory-web-api 可以帮助您开发客户端，因为您不需要工作后端。但是在某些时候，您可能还想测试和访问您的真实后端......

标签： node.js angular express mean-stack

【解决方案1】：

您可以更多地限制原点，如下所示：

 res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4200');

而不是星号。

部署后，您的标头可以与您的域一起指定，这将限制访问。

如果您真的关心安全性，我建议您开发一个基于 JWT 的系统，该系统仅在您的用户拥有访问令牌时才允许 GET、POST 等请求。并且在该令牌中，使用您的资源端点上的权限对其进行更多限制。

【讨论】：