在前端开发中，我们经常需要处理跨域请求，其中一个常见的解决方案是使用 Koa 框架的 koa-cors 中间件。但是，在实际开发过程中，很多人可能会遇到 “koa-cors not working” 的问题。本文将介绍如何解决这个问题，并提供相关的示例代码和学习指导。
什么是 koa-cors？
在介绍如何解决 “koa-cors not working” 问题之前，我们先了解一下 koa-cors 是什么。Koa-cors 是 Koa 框架的一个跨域资源共享中间件，它允许我们在 Koa 应用程序中设置 CORS 头部。它支持以下功能：
- 支持各种跨域请求
- 自定义 header（例如 Accept-Language）
- 支持 CORS 与非 CORS 请求
- 100% 兼容浏览器实现
- 可定制化
如何在 Koa 应用程序中使用 koa-cors 中间件？我们可以通过以下代码引入和配置 koa-cors：
const Koa = require('koa');
const cors = require('koa-cors');
const app = new Koa();
app.use(cors());以上代码只是最基本的 koa-cors 配置。接下来，我们将探讨如何解决“koa-cors not working”的问题。
解决方法
一、设置参数
koa-cors 中间件支持一个可选参数对象，操作参数的设置可以指定请求源头、客户端发送的携带证书等，在使用该中间件时，我们可以向其传递一些参数来决定其 / 响应头部上的行为。例如：
app.use(cors({
origin: 'https://example.com',
credentials: true
}));在这里，我们指定了请求源头和是否允许携带证书。如果不传递任何参数，那默认的 origin 是 ‘*‘（匹配任何源），不开启 credentials。
二、检查请求路由
如果你在控制台看到了如下错误消息：’Access-Control-Allow-Origin‘ 或者 ‘Access-Control-Allow-Credentials‘ 这两个 HTTP 头部被拒绝，你需要仔细检查你的请求路径，在请求路径中是否设置 Cors 头。例如：
app.use(async ctx => {
ctx.body = 'Hello World!';
ctx.set('Access-Control-Allow-Origin', '*');
ctx.rest.restfulOk(ctx.body);
})在这里，我们设置了响应头部权限为除了本站之外的任意站点都允许访问。检查你的请求路径是否有默认的Cors头，可能你有自己的Cors头部需要注意。
三、设置请求 Content-Type
考虑到有时请求的Content-Type不被支持，我们需要手动配置它，这样才能使用 CORS 中间件。建议在请求头中加入需要设置的 Content-Type。例如：
app.use(async ctx => {
ctx.type = 'application/json; charset=utf-8';
ctx.set('Access-Control-Allow-Origin', '*');
ctx.body = { message: 'Hello world!' };
});四、添加响应头 Access-Control-Expose-Headers
有时，有一些自定义的头需要在发出的响应中提供，这时候我们需要使用 Access-Control-Expose-Headers 。例如：
app.use(async ctx => {
ctx.set('Access-Control-Expose-Headers', 'Authorization');
ctx.set('Authorization', `Bearer ${token}`);
ctx.body = { message: 'Hello world!' };
});在这里，我们响应头中暴露了我们自己的自定义头 Authorization，这样 Vue、React 就可以正常获取我们在这个自定义头里传回的Access Token等个人信息。注意，这里暴露的头名称应对应你像引用它的请求头部。
示例代码
这里提供一个完整的基于 Koa 和 koa-cors 中间件的 “Hello World” 应用示例。在运行此示例之前，请确保你已经成功安装了 Koa 和 koa-cors：
-- -------------------- ---- ------- ----- --- - --------------- ----- ---- - -------------------- ----- --- - --- ------ ---------------- ------------- --- -- - ---------------------------------------- ----------------- ------------------------ ------- ----------- -------- - ------------------ --------------- -------- - - -------- ------ ------- -- --- ---------------- -- -- - ---------------------- -- ---- ------- ---
总结
在 Koa 项目开发中，我们经常会使用 koa-cors 中间件来解决跨域请求的问题。但是，有时候我们可能会遇到 “koa-cors not working” 的问题。本文介绍了四种解决方法，包括设置参数、检查请求路由、设置请求 Content-Type 和添加响应头 Access-Control-Expose-Headers。以上提供了一些简单的例子，具体的情况可能需要进一步的调试和定位。但是，在实践中，如果你按照以上设置还是无法解决问题，可以考虑其它解决方案，如使用其他的 CORS 中间件、重写 postMessage/JSONP，或使用 nginx 反向代理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65206e8b95b1f8cacd7e68c5