在 Deno 中如何处理常见的跨域请求问题？
Deno 是一款现代化的 JavaScript 和 TypeScript 运行时环境，因其安全性和简单性备受欢迎。然而，在开发前端项目中，跨域请求问题是一个常见的挑战，因为浏览器的安全策略禁止跨源通信。本文将介绍在 Deno 中如何处理常见的跨域请求问题，为你提供深度的学习和指导。
为了解决跨域请求问题，我们需要理解一些重要的概念。首先，跨域是指在浏览器中请求一个不同于当前页面所在域的资源。这可能发生在不同的域名、协议或端口上。其次，Deno 自带了跨域处理中间件，可以在你的应用程序中使用。最后，我们还需要了解 JSONP（JSON Padding） 和 CORS（Cross Origin Resource Sharing） 这两种解决跨域请求的方式。
使用 Deno 自带的中间件处理跨域请求
Deno 提供了一种在应用程序中处理 CORS 的方式。在应用程序中引用如下：
import { Application, cors } from "https://deno.land/x/oak/mod.ts";然后在创建自己的中间件之前使用 cors（）：
const app = new Application(); app.use(cors());
cors() 方法使服务器允许来自任何源的请求。你可以通过设置选项的方式进行限制。例如：
app.use(cors({
origin: "http://localhost:3000",
methods: ["GET", "POST"],
optionsSuccessStatus: 200
}));在上面的示例中，origin 选项定义了允许请求的源。该 methods 选项定义了允许请求的 HTTP 方法。最后， optionsSuccessStatus 选项定义了预检请求的状态码。通过这个示例，你可以自己定制具有更多限制的 CORS 方式。
使用 JSONP 处理跨域请求
JSONP 是一种有效的跨域请求方式，它通过声明一个在服务器上运行的函数，以便在浏览器中执行，该函数用作回调函数。为了实现这种方式，我们需要以下三个步骤：
- 定义在服务器上运行的函数（例如
greeting）作为回调函数：
function greeting(JSONP: any) {
console.log(JSONP);
}- 将
greeting函数打包到 JavaScript 脚本中：
const scriptSrc = `http://localhost:8000/js/server.js`;
const script = document.createElement("script");
script.src = `${scriptSrc}?callback=greeting`;
document.body.appendChild(script);- 在服务器端返回我们需要的结果：
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
--- ------ - --- ---------------- -------------------------------------------
--- ---- - -------------------
--- -------- - ------ ----------
-- ----------- --- ----- -- -------------------- --- ---------- -- ----------------------- -
------------------ -
--------------- ------------------
------------------------------ ---
---
--- ------ - ---------------------------------------------------------
----------------
- ---- -
-------------------
----------
-
----------------在上面的代码中，我们在服务器创建了一个路由，从 req.url 中检索查询参数，并返回 JSONP 结果作为函数的参数。
使用 CORS 处理跨域请求
CORS 是一种更加现代化和更简单的处理跨域请求的方式，因此它比 JSONP 更加流行。它使用 HTTP 头将请求源信息发送到服务器，并允许服务器指定在处理请求时要采取的策略。以下是一种简单的实现方式：
-- -------------------- ---- -------
----- --- - ------------------------------------------ ---- -
------------------ -
--------------- -------------
------------------------------ ----
------------------------------- --------------
---
---------------- ------ ----------
---
-----------------在上面的代码中，我们使用 res.writeHead() 方法设置允许源和允许头。源头指的是指定的允许的请求来源，允许头部允许服务器指定请求的 HTTP 头，这些头允许跨域。
结论
跨域请求是前端开发中的一个很大的问题。为了在 Deno 中成功处理此问题，我们需要了解 JSONP 和 CORS 这两种最常见的处理方式，并知道如何从 Deno 中使用现成的跨域处理中间件。我们希望本文能够帮助你在开发前端项目时更好地处理跨域请求问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67315cf00bc820c5823885b0