Deno 中的 CORS 解决方案-JavaScript中文网-JavaScript教程资源分享门户

CORS（跨域资源共享）是 Web 开发中常见的一个问题，它限制了浏览器从一个源加载资源时的跨域访问。Deno 是一个新兴的 JavaScript 运行时环境，它提供了一种简单的方式来解决 CORS 问题。

CORS 的问题

CORS 问题源自于浏览器的同源策略，即浏览器只允许与同一域名（协议、端口号）的服务器进行通信。如果我们在一个页面中向不同域名的服务器发起请求，就会触发浏览器的 CORS 机制，导致请求失败。

例如，我们有一个前端页面在 http://example.com 下运行，它想要从 http://api.example.com 获取数据。由于这两个域名不同，浏览器就会阻止这个请求，除非服务器设置了正确的 CORS 响应头。

Deno 中的解决方案

Deno 提供了一个 --allow-net 选项，允许我们在程序中进行网络请求。如果我们在 Deno 中发起了一个跨域请求，服务器会返回一个 CORS 错误。为了解决这个问题，我们可以在服务器端设置正确的 CORS 响应头。

下面是一个示例代码，它使用 Deno 发起一个跨域请求，并在服务器端设置了正确的 CORS 响应头：

// javascriptcn.com 代码示例
import { serve } from 'https://deno.land/std/http/server.ts';

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

for await (const req of server) {
  if (req.method === 'GET' && req.url === '/api') {
    const res = await fetch('http://api.example.com');
    const data = await res.json();

    req.respond({
      body: JSON.stringify(data),
      headers: new Headers({
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Headers': 'Content-Type',
      }),
    });
  } else {
    req.respond({ status: 404 });
  }
}

在这个示例中，我们启动了一个本地服务器，监听 8000 端口。当浏览器向 /api 路径发起 GET 请求时，服务器会向 http://api.example.com 发起请求，并将响应的数据返回给浏览器。同时，服务器还设置了 Access-Control-Allow-Origin 和 Access-Control-Allow-Headers 响应头，允许浏览器跨域访问。

总结

CORS 是 Web 开发中常见的一个问题，它限制了浏览器从一个源加载资源时的跨域访问。Deno 提供了一个简单的方式来解决 CORS 问题，我们只需要在服务器端设置正确的 CORS 响应头即可。在实际开发中，我们可以使用 Deno 发起跨域请求，并在服务器端设置正确的响应头，以解决 CORS 问题。

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