什么是 CORS
CORS（Cross-Origin Resource Sharing），即跨域资源共享，是一种用于解决跨域访问问题的标准。当一个请求从一个源（域、协议、端口）发起，向另一个源发出请求时，就会触发跨域问题。CORS 通过在服务器端设置响应头来告诉浏览器哪些跨域请求可以被接受，从而解决跨域问题。
Fastify 中的 CORS
Fastify 是一个快速、低开销并且可扩展的 Node.js Web 框架。Fastify 默认没有开启 CORS，因此如果需要在 Fastify 中处理跨域问题，需要手动设置响应头。
解决方法
1. 手动设置响应头
在 Fastify 的路由处理函数中，可以手动设置响应头，例如：
fastify.get('/', (request, reply) => {
reply.header('Access-Control-Allow-Origin', '*');
reply.send({ hello: 'world' });
});这里的 reply.header('Access-Control-Allow-Origin', '*') 表示允许所有域名的请求访问该接口。如果要限制某些域名的访问，可以将 * 替换为具体的域名。
2. 使用 fastify-cors 插件
Fastify 社区提供了一个 fastify-cors 插件，可以方便地处理跨域问题。安装插件：
npm install fastify-cors
在 Fastify 应用中注册插件：
// javascriptcn.com 代码示例
const fastify = require('fastify')();
const cors = require('fastify-cors');
fastify.register(cors, {
origin: '*',
});
fastify.get('/', (request, reply) => {
reply.send({ hello: 'world' });
});这里的 origin: '*' 表示允许所有域名的请求访问该接口。如果要限制某些域名的访问，可以将 * 替换为具体的域名。
fastify-cors 插件还支持更多的配置项，例如：
fastify.register(cors, {
origin: ['http://localhost:3000', 'http://example.com'],
methods: ['GET', 'POST', 'PUT', 'DELETE'],
allowedHeaders: ['Content-Type', 'Authorization'],
exposedHeaders: ['Content-Range', 'X-Content-Range'],
credentials: true,
});这里的配置项含义如下：
origin：允许访问的域名，可以是字符串或字符串数组。methods：允许访问的 HTTP 方法，可以是字符串或字符串数组。allowedHeaders：允许访问的请求头，可以是字符串或字符串数组。exposedHeaders：允许访问的响应头，可以是字符串或字符串数组。credentials：是否允许携带 Cookie，可以是布尔值或字符串。
示例代码
// javascriptcn.com 代码示例
const fastify = require('fastify')();
const cors = require('fastify-cors');
fastify.register(cors, {
origin: '*',
});
fastify.get('/', (request, reply) => {
reply.send({ hello: 'world' });
});
fastify.listen(3000, (err) => {
if (err) {
console.error(err);
process.exit(1);
}
console.log(`Server running at http://localhost:3000`);
});总结
CORS 跨域问题是 Web 开发中常见的问题，Fastify 默认不开启 CORS，需要手动设置响应头或使用 fastify-cors 插件来解决跨域问题。使用 fastify-cors 插件可以更方便地处理跨域问题，并支持更多的配置项。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655ac87cd2f5e1655d4fc3d1