MEAN Stack 中的 CORS

在上一节中，我们学习了如何使用 angular http 客户端。我们从 app.js 文件中获取了帖子，并将它们显示在 localhost 3000/api/posts 路径上。之前，我们遇到了 CORS 错误。本节将让我们了解它是什么以及如何从我们的应用程序中删除它。

CORS 代表 跨域资源共享。这正是我们所做的。我们分离了在不同域上运行的服务器和客户端。我们使用 localhost: 3000 作为服务器，使用 localhost 4200 作为我们的 angular 应用程序。客户端和服务器都想互相通信，但它们不在同一主机上。如果它们在同一主机上，它们就可以毫无问题地进行通信。因此，如果请求来自不同的地址，这将给我们带来所谓的 CORS 错误。

在许多现代 Web 应用程序中，我们需要允许这样做。这不是一个安全问题；这是一种想要的行为。为此，我们需要公开我们的服务器 API 以供所有可能的客户端使用，这可以通过在服务器端响应上设置正确的标头来完成。我们将使用以下步骤来设置标头

1) 我们将返回到我们的 app.js 文件，在这个文件中，我们将添加另一个中间件。此中间件将在处理响应之前以以下方式运行

next() 函数在最后使用，因为请求应该能够继续到下一个中间件。

2) 在调用 next() 之前，我们需要操作请求或响应以使其精确。我们将获取响应对象并使用 setHeader() 方法设置标头。 setHeader() 方法将标头键作为第一个参数，将标头的值作为第二个参数。我们将设置标头名称 Access-Control-Allow-Origin。我们必须确保名称与它相同，因为这是一个浏览器理解的明确定义的标头。我们将将其值设置为星号 (*)，如下所示

此星号值意味着无论哪个域运行发送请求的应用程序。允许访问我们的资源。

3) 我们还需要另一个标头名称 Access-Control-Allow-Headers。第一个标头允许哪些域能够访问我们的资源，但现在我们将其限制为使用一组特定标头（而不是默认标头）发送请求的域，例如，浏览器。我们需要允许一些额外的标头，如 Origin 标头、X-Requested-With 标头、Content-Type 标头和 Accept 标头，如下所示

如果它有另一个未在上面定义的非默认标头，则即使我们通常允许所有域，访问也会被阻止。

4) 我们将添加一个名为 Access-Control-Allow-Methods 的标头。在此标头中，我们将控制哪些 http 动词可用于发送请求。我们希望允许 GET、POST、PATCH、DELETE 和 OPTIONS。 OPTIONS 是浏览器默认在 post 请求之前发送的隐式请求。因此，即使从未从我们的 angular 应用程序中直接发送这样的选项请求，它也会被隐式发送，因此我们应该允许它作为 http 动词。

有了这些标头，我们就可以发送该请求了。我们将保存它，并且将能够在我们的 angular 应用程序中看到服务器端数据。