解决 Deno 中的跨域问题-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，跨域问题是一个常见的难题。Deno 是一个新兴的后端开发平台，其默认情况下是启用跨域限制的。本文将介绍如何解决 Deno 中的跨域问题，包括原因、解决方案和示例代码。

为什么会存在跨域问题

在 Web 应用中，浏览器通常会限制从一个源加载的资源与另一个源进行交互。这是为了防止恶意脚本攻击用户数据。这种限制称为同源策略。

同源策略的限制包括：

协议不同（http/https）
域名不同（www.example.com 和 example.com）
端口不同（http://www.example.com:8080 和 http://www.example.com:8081）

如果两个 URL 不满足以上三个条件中的任意一个，那么它们就被认为是跨域的。在 Deno 中，默认情况下是启用了跨域限制的。

解决方案

CORS

CORS（Cross-Origin Resource Sharing）是一种跨域解决方案。它允许服务器向其他域名下的浏览器发送跨域 HTTP 请求，从而解决了浏览器的同源策略限制。

在 Deno 中，我们可以使用如下代码来启用 CORS：

// www.javascriptcn.com code example
import { Application } from "https://deno.land/x/oak/mod.ts";

const app = new Application();

app.use(async (context) => {
  context.response.headers.set("Access-Control-Allow-Origin", "*");
  context.response.headers.set(
    "Access-Control-Allow-Methods",
    "GET, POST, PUT, DELETE, OPTIONS",
  );
  context.response.headers.set("Access-Control-Allow-Headers", "Content-Type");
  if (context.request.method === "OPTIONS") {
    context.response.status = 200;
  }
});

await app.listen({ port: 8000 });

在上面的代码中，我们使用了 Oak 框架来创建一个应用程序，并在应用程序中添加了一个中间件来启用 CORS。该中间件设置了三个响应头：

Access-Control-Allow-Origin：允许跨域访问的域名。使用 * 表示允许所有域名访问。
Access-Control-Allow-Methods：允许跨域访问的 HTTP 方法。这里我们允许 GET、POST、PUT、DELETE 和 OPTIONS 方法。
Access-Control-Allow-Headers：允许跨域访问的请求头。

如果请求方法是 OPTIONS，那么响应状态码应该是 200。

JSONP

JSONP（JSON with Padding）是一种跨域解决方案。它利用了浏览器对于 script 标签的跨域限制较少的限制，通过在 HTML 页面中动态添加 script 标签来完成跨域请求。

在 Deno 中，我们可以使用如下代码来实现 JSONP：

// www.javascriptcn.com code example
import { serve } from "https://deno.land/std/http/server.ts";

const server = serve({ port: 8000 });

for await (const request of server) {
  const params = new URLSearchParams(request.url.split("?")[1]);
  const callback = params.get("callback");
  const data = { message: "Hello, world!" };
  const body = `${callback}(${JSON.stringify(data)})`;
  request.respond({ body });
}

在上面的代码中，我们使用了标准库中的 serve 函数创建了一个 HTTP 服务器，并在服务器中处理了 GET 请求。我们从 URL 参数中获取了回调函数的名称，并构造了一个 JSONP 响应。

示例代码

使用 CORS

// www.javascriptcn.com code example
import { Application } from "https://deno.land/x/oak/mod.ts";

const app = new Application();

app.use(async (context) => {
  context.response.headers.set("Access-Control-Allow-Origin", "*");
  context.response.headers.set(
    "Access-Control-Allow-Methods",
    "GET, POST, PUT, DELETE, OPTIONS",
  );
  context.response.headers.set("Access-Control-Allow-Headers", "Content-Type");
  if (context.request.method === "OPTIONS") {
    context.response.status = 200;
  } else if (context.request.url.pathname === "/api/hello") {
    context.response.body = { message: "Hello, world!" };
  }
});

await app.listen({ port: 8000 });

在上面的代码中，我们使用了 Oak 框架来创建一个应用程序，并在应用程序中添加了一个中间件来启用 CORS。我们在中间件中判断了请求的方法和路径，并返回了一个 JSON 响应。

使用 JSONP

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>JSONP Example</title>
  </head>
  <body>
    <div id="message"></div>
    <script>
      function handleResponse(data) {
        document.getElementById("message").innerHTML = data.message;
      }

      const script = document.createElement("script");
      script.src = "http://localhost:8000/?callback=handleResponse";
      document.body.appendChild(script);
    </script>
  </body>
</html>

在上面的代码中，我们在 HTML 页面中动态添加了一个 script 标签，并将其 src 属性设置为我们的 JSONP 请求 URL。我们还定义了一个回调函数来处理响应数据，并将响应数据显示在页面上。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67cd056ce46428fe9e65331b

解决 Deno 中的跨域问题