使用 Koa 如何正确配置 CORS

CORS（跨域资源共享）是一种基于 HTTP 头部的机制，用于让网站服务器访问来自不同域名的资源。在前端开发中，CORS 是一个常见的问题，因为浏览器会限制跨域请求，如果没有正确配置 CORS，会导致前端请求失败。

在 Koa 中，我们可以使用 koa-cors 中间件来配置 CORS。本文将介绍如何使用 Koa 和 koa-cors 中间件来正确配置 CORS。

安装 koa-cors

首先，我们需要安装 koa-cors 中间件。可以使用以下命令来安装：

npm install koa-cors --save

配置 koa-cors

在 Koa 中，我们需要在中间件中配置 koa-cors。以下是一个简单的例子：

// javascriptcn.com 代码示例
const Koa = require('koa');
const cors = require('@koa/cors');

const app = new Koa();

app.use(cors({
  origin: '*',
  allowMethods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowHeaders: ['Content-Type', 'Authorization'],
}));

在上面的代码中，我们使用 app.use() 方法来添加中间件。我们传递了一个对象作为参数，该对象包含以下属性：

• origin: 允许的源，可以是字符串、数组、函数或布尔值。如果设置为 *，则允许所有来源。
• allowMethods: 允许的 HTTP 方法。
• allowHeaders: 允许的 HTTP 头部。

配置示例

以下是一个更完整的配置示例：

// javascriptcn.com 代码示例
const Koa = require('koa');
const cors = require('@koa/cors');

const app = new Koa();

app.use(cors({
  origin: function(ctx) {
    if (ctx.url === '/test') {
      return false;
    }
    return '*';
  },
  exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'],
  maxAge: 5,
  credentials: true,
  allowMethods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowHeaders: ['Content-Type', 'Authorization', 'Accept'],
}));

app.listen(3000);

在上面的代码中，我们配置了以下选项：

• origin: 我们使用一个函数来判断是否允许来源。如果请求的 URL 是 /test，则不允许。
• exposeHeaders: 允许暴露的 HTTP 头部。
• maxAge: 缓存时间，单位为秒。
• credentials: 是否允许发送 Cookie。
• allowMethods: 允许的 HTTP 方法。
• allowHeaders: 允许的 HTTP 头部。

总结

在本文中，我们介绍了如何使用 Koa 和 koa-cors 中间件来正确配置 CORS。我们讨论了一些常见的选项，并提供了一个完整的配置示例。使用这些知识，您可以在前端开发中更好地处理跨域请求。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655d5c04d2f5e1655d79d2f0