如何在 Fastify 中设置跨域资源共享并解决常见的 CORS 错误

前言

前端开发中，我们时常会遇到跨域资源共享（CORS）的问题。本文将为大家介绍在 Fastify 中如何设置跨域资源共享，并解决常见的 CORS 错误。

跨域资源共享的原理

跨域资源共享（CORS）是一种解决跨域访问的机制，由 W3C 推荐。CORS 机制可以让其它域名下的 Web 应用程序访问当前域名下的资源。在客户端，当请求当前域名下的资源时，浏览器会发送一个预检（OPTIONS）请求到服务器，服务器返回允许跨域访问的响应头信息，客户端才能进行实际的请求操作。

Fastify 中设置 CORS

在 Fastify 中，使用 fastify-cors 插件可以轻松地设置跨域资源共享。安装命令如下：

npm install fastify-cors --save

在 Fastify 应用程序中引入 fastify-cors 插件即可：

const fastify = require('fastify')()

fastify.register(require('fastify-cors'), {
  origin: '*',
  methods: ['GET', 'PUT', 'POST', 'DELETE']
})

以上代码表示允许所有域名的 Web 应用程序访问当前域名下的资源，同时允许 GET、PUT、POST 和 DELETE 请求。

常见的 CORS 错误及解决方法

CORS 预请求失败

预请求（OPTIONS）是 CORS 机制的一部分，用于检查服务器是否允许跨域请求。如果浏览器无法发送预请求，那么跨域请求也将失败。

这个问题通常是因为服务器没有设置请求头信息引起的。使用 fastify-cors 插件可以轻松地解决这个问题：

fastify.register(require('fastify-cors'), {
  origin: '*',
  methods: ['GET', 'PUT', 'POST', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization']
})

以上代码表示允许访问者携带的请求头信息中包含 Content-Type 和 Authorization。

CORS 预请求响应头信息不正确

如果预请求（OPTIONS）返回的响应头信息不正确，浏览器将无法解析请求结果而导致跨域请求失败。

通常，预请求响应头信息不正确是因为服务器没有正确设置 Access-Control-Allow-Headers 和 Access-Control-Allow-Methods 等头信息。使用 fastify-cors 插件可以轻松地解决这个问题：

fastify.register(require('fastify-cors'), {
  origin: '*',
  methods: ['GET', 'PUT', 'POST', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  exposedHeaders: ['Content-Length', 'X-Foo', 'X-Bar'],
  credentials: true,
  maxAge: 86400
})

以上代码表示允许访问者携带的请求头信息中包含 Content-Type 和 Authorization，同时设置响应头信息中披露的信息包括 Content-Length、X-Foo 和 X-Bar。

CORS 请求失败

如果请求失败，通常是因为服务器没有正确设置 Access-Control-Allow-Origin 头信息。使用 fastify-cors 插件可以轻松地解决这个问题：

fastify.register(require('fastify-cors'), {
  origin: '*',
  methods: ['GET', 'PUT', 'POST', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  exposedHeaders: ['Content-Length', 'X-Foo', 'X-Bar'],
  credentials: true,
  maxAge: 86400
})

以上代码表示允许所有域名的 Web 应用程序访问当前域名下的资源。

总结

本文着重介绍了如何在 Fastify 中设置跨域资源共享，并解决常见的 CORS 错误。通过本文的学习，可以帮助大家更加深入地理解 CORS 机制的原理，并为实际项目中的开发提供指导意义。

参考文献

1. W3C Recommendation CORS
2. Fastify Cross-origin Resource Sharing (CORS)

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/652fb1247d4982a6eb0e0746