在开发 Web 应用程序时，经常会面临跨域请求的问题。跨域请求是指在不同域名或端口上的请求，例如，向 http://www.example.com 发送一个请求而当前的页面是 http://www.anotherexample.com。
为了允许跨域请求，需要在响应头设置 Access-Control-Allow-Origin（简称 ACAO）属性。在 Fastify 框架中，我们可以使用 fastify-cors 插件来轻松地处理跨域请求。然而，在某些情况下，即使使用了该插件，仍然会出现一些问题。
问题描述
假设我们有一个 Web 应用程序，服务端地址为 http://server.example.com，客户端地址为 http://client.example.com。在客户端上，我们通过 AJAX 请求从服务端获取数据：
$.ajax({
url: 'http://server.example.com/data',
method: 'GET',
success: function(data) {
console.log(data);
}
});在服务端代码中，我们使用 Fastify 框架和 fastify-cors 插件来处理跨域请求：
-- -------------------- ---- -------
----- ------- - ---------------------
----- ---- - ------------------------
---------------------- -
------- ---------------------------
---
-------------------- ----- ---- -- -
----------
-------- ------ -------
---
---
-------------------- ----- -- -
-- ----- ----- ----
------------------- --------- -- ---- -----------------------------------
---然而，在浏览器控制台中，我们看到以下错误：
Access to XMLHttpRequest at 'http://server.example.com/data' from origin 'http://client.example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
根据错误信息，我们可以看到 ACAO 属性未被正确设置。但是我们已经使用了 fastify-cors 插件，为什么还会出现这个问题呢？
原因分析
在使用 fastify-cors 插件时，我们只是配置了 ACAO 的值，但它不能自动处理所有的 OPTIONS 请求。每当浏览器发送一个跨域请求时，它首先会发送一个 OPTIONS 请求，以确定服务器是否允许该类型的请求。如果服务器未正确处理 OPTIONS 请求，那么浏览器会拒绝跨域请求。
为了解决这个问题，我们需要在我们的 Fastify 代码中手动处理 OPTIONS 请求，并设置 ACAO 属性。幸运的是，这很容易做到。
我们只需要在 fastify-cors 插件之前注册一个空的路由处理 OPTIONS 请求：
fastify.options('/*', (req, res) => {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type');
res.send();
});该路由模式表示捕获所有路径的 OPTIONS 请求，因为我们无法预先知道客户端将使用哪个路径，以及它将发送哪些请求类型。我们还设置了 ACAO、Allow-Methods 和 Allow-Headers 属性，表明服务器允许哪些类型的请求。
结论
在 Fastify 框架中，正确设置 ACAO 属性可以轻松地处理跨域请求。但是，我们必须注意 OPTIONS 请求，并在 Fastify 中手动处理它们，以便浏览器可以正确处理跨域请求。
下面是完整的 Fastify 代码例子：
-- -------------------- ---- -------
----- ------- - ---------------------
----- ---- - ------------------------
--------------------- ----- ---- -- -
----------------------------------------- -----
------------------------------------------ -----------------------
------------------------------------------ ----------------
-----------
---
---------------------- -
------- ---------------------------
---
-------------------- ----- ---- -- -
----------
-------- ------ -------
---
---
-------------------- ----- -- -
-- ----- ----- ----
------------------- --------- -- ---- -----------------------------------
---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f3e0c8f40ec5a964e5795a