Deno 中如何处理跨域访问问题

在前端开发中，跨域是一个经常遇到的问题。在使用 Deno 构建应用时，同样也会遇到这个问题。本文将为大家介绍如何使用 Deno 处理跨域访问问题。

什么是跨域访问问题？

跨域访问问题指的是在访问一个不同域名下的资源时，浏览器会限制对该资源的访问。比如在 A 域名下的页面，请求 B 域名下的接口，这时浏览器会限制对该接口的访问，这就是跨域访问问题。

Deno 中如何处理跨域访问问题？

在 Deno 中，处理跨域访问问题需要通过设置 Access-Control-Allow-Origin 和 Access-Control-Allow-Methods 等响应头来支持跨域访问。我们可以使用 Deno 中提供的 serve() 方法来创建一个服务，并在响应头中添加上述属性，如下所示：

import { serve } from "https://deno.land/std/http/server.ts";

const server = serve({ port: 8080 });
console.log("Listening on http://localhost:8080/");

for await (const req of server) {
  req.respond({
    headers: new Headers({
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "OPTIONS, GET, POST, PUT, DELETE",
    }),
    body: "Hello World",
  });
}

在上述代码中，我们使用 serve() 方法创建了一个服务，并在响应头中添加了 Access-Control-Allow-Origin 和 Access-Control-Allow-Methods 属性，同时设置了 body 为 Hello World。

示例代码

下面是一个完整的示例代码，展示了如何在 Deno 中通过设置响应头处理跨域访问问题：

import {
  serve,
  Response,
  ServerRequest,
} from "https://deno.land/std/http/server.ts";

const server = serve({ port: 8080 });
console.log("Listening on http://localhost:8080/");

function setCORSHeaders(res: Response) {
  res.headers.set("Access-Control-Allow-Origin", "*");
  res.headers.set("Access-Control-Allow-Methods", "OPTIONS, GET, POST, PUT, DELETE");
  res.headers.set("Access-Control-Allow-Headers", "Content-Type");
}

for await (const req of server) {
  if (req.method === "OPTIONS") {
    const res: Response = {
      status: 200,
      headers: new Headers({
        "Content-Type": "application/json",
      }),
    };
    setCORSHeaders(res);
    req.respond(res);
  } else {
    const res: Response = {
      status: 200,
      headers: new Headers({
        "Content-Type": "application/json",
      }),
      body: JSON.stringify({ message: "Hello World" }),
    };
    setCORSHeaders(res);
    req.respond(res);
  }
}

在上述代码中，我们定义了一个 setCORSHeaders() 方法用于设置响应头。在 serve() 方法中，我们判断请求的方法是否为 OPTIONS，如果是，我们设置响应头。如果不是，我们设置响应体并设置响应头。

总结

通过以上例子，我们知道 Deno 中如何处理跨域访问问题。在 Deno 中，我们可以使用 serve() 方法创建一个服务，并在响应头中添加 Access-Control-Allow-Origin 和 Access-Control-Allow-Methods 属性来支持跨域访问。同时，我们可以通过设置 Access-Control-Allow-Headers 属性来支持跨域访问时的请求头。

希望读者通过本文能够了解 Deno 中跨域访问问题的处理方法，并掌握相关技能。

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