前言
在现代前端开发中，经常会遇到跨域的问题。当我们希望从一个域名下的网站向另一个域名下的网站发送网络请求时，由于浏览器的同源策略（same-origin policy）的限制，就会出现跨域的问题。为了解决这个问题，我们可以使用 CORS（Cross-Origin Resource Sharing）跨域资源共享来进行限制和授权。
本文将介绍如何在 Deno 中使用 CORS 解决跨域问题，并给出详细的示例代码和指导意义。
什么是 Deno？
Deno 是一个用于服务器端的 JavaScript 和 TypeScript 环境，它由 Node.js 的创建者 Ryan Dahl 开发。Deno 在设计上与 Node.js 不同，它使用了更为现代的技术，如异步 I/O（使用 async/await），而不是回调函数。
Deno 的目标是成为一个安全、稳定和可靠的 JavaScript 和 TypeScript 运行时环境，并且与 Node.js 不同，Deno 默认情况下没有任何系统权限。这意味着我们需要显式地请求访问文件系统、网络等，使得 Deno 更加安全。
如何使用 CORS 解决跨域问题
在 Deno 中使用 CORS 跨域资源共享非常简单。我们首先需要导入一个名为 cors 的模块，该模块提供了一个中间件函数，用于设置跨域的一些选项。下面是一个简单的示例代码：
-- -------------------- ---- ------- ------ - ------------ ------ - ---- --------------------------------- ------ - ------- - ---- ---------------------------------- ----- --- - --- -------------- ----- ------ - --- --------- ----------------------- ---------- ----- --------- -- - ----- ---- - - ---- ------- ------- -- --------------------- - ----- --- ------------------------- --------------------------------- ----- ------------ ----- ---- ---
首先，我们导入了 oak 的模块和 cors 的模块。oak 是一个基于中间件的框架，它提供了一个方便的 API 来处理 HTTP 请求和响应。
然后，我们创建了一个应用程序实例 app 和一个路由器实例 router。在路由器中，我们使用 oakCors() 中间件函数来设置 CORS 的选项。这里我们没有传入任何选项，因此使用默认的选项。接着，我们定义了一个 GET 路由，它会返回一个简单的数据对象。
最后，我们使用 app.use() 函数来将路由器添加到应用程序中，并监听端口 8000。
这样，我们就使用了 CORS 中间件来解决了跨域问题。当我们从一个不同的域名下的网站发送 GET 请求到 http://localhost:8000/api/data 时，服务器会返回以下响应：
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET, HEAD, POST, PUT, DELETE, CONNECT, OPTIONS, TRACE, PATCH
Access-Control-Allow-Headers: x-requested-with
{"msg":"Hello, world!"}CORS 选项
oakCors() 中间件函数支持以下选项：
origin：用于设置允许访问的域，可以是一个字符串或数组。默认情况下，允许所有来源访问。methods：用于设置允许的 HTTP 方法，可以是一个字符串或数组。默认情况下，允许 GET、HEAD、POST 方法。headers：用于设置允许的自定义请求头，可以是一个字符串或数组。默认情况下，允许Accept、Accept-Language、Content-Language、Content-Type、Last-Event-ID请求头。exposeHeaders：用于允许前端访问哪些响应头字段的值。默认情况下，允许的响应头为Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。
例如，如果我们想要允许来自 http://example.com 的跨域请求，并且只允许 GET 方法和自定义请求头 x-requested-with，则可以这样设置选项：
const corsOptions = {
origin: "http://example.com",
methods: ["GET"],
headers: ["x-requested-with"]
};
router.get("/api/data", oakCors(corsOptions), async (context) => {
// ...
});总结
在本文中，我们介绍了如何在 Deno 中使用 CORS 跨域资源共享来解决跨域问题。通过使用 cors 模块提供的中间件函数，我们可以轻松地设置跨域选项，使得我们的应用程序可以与来自不同域名的前端应用程序进行交互。我们还讨论了 CORS 的一些选项，并给出了示例代码。
了解如何使用 CORS 是现代前端开发的一个关键技能，它可以使我们的应用程序变得更加灵活和互动。从本文中学到的知识，你可以在你的 Deno 项目中快速地实现跨域请求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64897e4f48841e98947c7bcc