跨域资源共享（CORS）是一种常见的网络安全机制，限制了浏览器在跨域请求时的行为。虽然它有助于防止恶意攻击，但对前端开发人员来说，CORS 也经常成为开发过程中的一大坑。
在 Hapi 框架中，使用 hapi-cors 插件可以很方便地进行 CORS 配置。但是，即使正确配置了插件，仍然可能会在开发中遇到一些奇怪的 CORS 错误。本文将介绍一些实用的 CORS 错误解决方案，帮助读者更好地应对 CORS 问题。
1. CORS 错误的常见情形
在 Hapi 中，出现 CORS 错误的情况有很多，比如：
- 在向不支持 CORS 的服务发起请求时；
- 在没携带正确的认证信息时，跨域请求被拒绝；
- 在向服务器发出预检请求（OPTIONS）时，收到了错误的响应等等。
在接下来的章节中，我们将详细讨论每一类 CORS 错误，并找出对应的解决方案。
2. 向不支持 CORS 的服务发起请求时
当我们向一个不支持 CORS 的服务发起 AJAX 请求时，浏览器会显示如下错误提示：
Access to XMLHttpRequest at <url> from origin <our-domain> has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
这是因为该服务没有设置 Access-Control-Allow-Origin 响应头，浏览器认为它不信任跨域请求。
解决办法非常简单，只需要在服务端设置该响应头即可。在 Hapi 中，我们可以使用 hapi-cors 插件轻松实现：
-- -------------------- ---- -------
----- ---- - ----------------------
----- -------- - ---------------------
----- ------ - -------------
----- -----
---
----- -----------------
------- ---------
-------- -
-------- ------ -- -----------
-
---在以上代码中，我们设置了 origins: ['*']，表示允许任何来源的跨域请求。实际应用中，我们应该根据具体情况设置合适的 origins。
3. 跨域请求被拒绝
在一些场景下，服务器可能要求客户端提供有效的认证信息才能访问接口。此时，如果我们发起了未携带认证信息的跨域请求，就会被服务器拒绝：
Access to XMLHttpRequest at <url> from origin <our-domain> has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
这个错误提示告诉我们，浏览器已经向服务器发出了预检请求（OPTIONS），但是服务器并没有给出正确的响应，导致浏览器将其拒绝了。
解决这个问题的方法非常简单：在服务器返回的响应中，同时携带 Access-Control-Allow-Origin，
Access-Control-Allow-Methods 和 Access-Control-Allow-Headers 等标准 CORS 响应头，帮助浏览器验证请求是否合法。
在 Hapi 中，我们可以使用 hapi-cors 插件来自动生成这些响应头。只需要在注册 hapi-cors 插件时，将 credentials: true 选项设置为 true 即可：
await server.register({
plugin: HapiCors,
options: {
origins: ['*'],
credentials: true, // 允许携带认证信息的跨域请求
}
});4. 非标准 CORS 响应头
在某些情况下，服务器可能会响应一些非标准的 CORS 响应头。此时，浏览器依然会拒绝跨域请求，因为它认为这并不符合 CORS 规范。
解决这种问题的方法是在服务器端添加相应的 CORS 响应头。在 Hapi 中，我们需要使用 hapi-cors 插件的自定义响应头选项：
await server.register({
plugin: HapiCors,
options: {
origins: ['*'],
additionalExposedHeaders: ['Pragma', 'Cache-Control', 'Expires'], // 添加额外的 CORS 响应头
}
});在以上代码中，我们使用 additionalExposedHeaders 选项设置额外的 CORS 响应头。这些响应头会被自动添加到跨域响应中，帮助浏览器正确地验证请求。
总结
CORS 错误是前端开发中常见的问题，也是开发者容易犯错的地方。虽然 Hapi-cors 插件能够帮助我们轻松地实现标准的 CORS 配置，但是我们仍然需要注意一些非标准情况下的 CORS 错误。本文总结了比较常见的 CORS 错误及其解决方案，希望能对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647040a5968c7c53b0e622aa