在前端开发中，经常需要通过网络请求获取数据。但是由于浏览器的安全策略，跨域请求是被限制的，比如不能从不同的域名、协议端口号获取数据。
在 Deno 中，我们可以使用标准的 Fetch API 对跨域请求进行处理。本文将详细介绍在 Deno 中如何跨域访问 API。
使用 Fetch API 跨域请求 API
Fetch API 是一种基于 Promise 的网络请求 API，它提供了一种简洁、灵活的方式来获取数据。我们可以使用 Fetch API 发送跨域请求，代码如下：
const res = await fetch('https://api.example.com/data');
const data = await res.json();
console.log(data);上面的代码使用 Fetch API 发送一个 GET 请求，请求地址是 https://api.example.com/data。我们可以通过调用 res.json() 方法来获取返回的 JSON 数据。
处理跨域请求的问题
在前面的示例中，我们并没有对跨域请求的问题进行处理。在 Deno 中，我们可以使用以下方法来处理跨域请求的问题。
使用 CORS
CORS 是一种解决跨域请求的方案，它允许浏览器向服务器发送跨域请求。在 Deno 中，我们可以使用 cors 模块来开启 CORS。安装方法如下：
deno install --allow-net --allow-read https://deno.land/x/cors/cors.ts
安装完成后，我们可以在代码中使用以下方式来开启 CORS：
// javascriptcn.com 代码示例
import { Application } from 'https://deno.land/x/oak/mod.ts';
import { oakCors } from 'https://deno.land/x/cors/mod.ts';
const app = new Application();
// 使用 oakCors 中间件开启 CORS
app.use(oakCors());
app.listen({ port: 8080 });上面的代码中，我们使用 oak 框架创建了一个应用，并使用 oakCors 中间件开启了 CORS。
使用 JSONP
JSONP 是另一种解决跨域请求的方案，它利用了浏览器可以跨域访问 script 标签的特点来实现跨域请求。在 Deno 中，我们可以通过创建 script 标签实现 JSONP。
// javascriptcn.com 代码示例
function jsonp(url, callback) {
const script = document.createElement('script');
script.src = url;
script.onload = () => {
callback(window.data);
document.body.removeChild(script);
};
document.body.appendChild(script);
}
jsonp('https://api.example.com/data?callback=handleData', data => {
console.log(data);
});上面的代码中，我们定义了一个 jsonp 函数，通过创建 script 标签来发送 JSONP 请求，并在 onload 回调中获取返回的数据。需要注意的是，URL 中需要指定回调函数的名称。
总结
在 Deno 中，我们可以使用 Fetch API、CORS 和 JSONP 三种方式来处理跨域请求的问题。使用这些技术，我们可以轻松地访问任意域名下的 API 数据。
希望本文对您有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654866bb7d4982a6eb2ac130