如何在 Deno 中控制 CORS?

面试官:小伙子,你的代码为什么这么丝滑?

CORS(Cross-Origin Resource Sharing)是一种安全策略,用于限制 Web 应用程序如何使用来自其他源的资源。如果你正在开发一个使用 Deno 的前端应用程序,并且需要访问来自其他域的资源,就会面临 CORS 问题。在本文中,我们将学习如何在 Deno 中控制 CORS。

Deno 中的 CORS

Deno 通过提供 --allow-net 权限来允许网络连接。但是,在默认情况下,Deno 不允许跨域请求。这意味着如果你正在尝试从另一个域请求资源,你将会遇到 CORS 问题。如果你尝试这样的请求,将会看到以下错误:

------ -- ----- -- ---------------------------- ---- ------ ----------------------- --- ---- ------- -- ---- ------- -- ----------------------------- ------ -- ------- -- --- --------- ---------

这是由于浏览器安全机制所致。浏览器会检查响应头中是否包含 Access-Control-Allow-Origin,这个头告诉浏览器是否允许跨域请求。如果没有这个头或者这个头的内容与当前域不匹配,浏览器就会阻止请求。

解决 CORS 问题

解决 CORS 问题的一种常用方式是为响应添加 Access-Control-Allow-Origin 头,并设置为允许跨域请求的源。你可以在服务器上配置这个头,或者在客户端中添加。

在 Deno 中,我们可以通过处理器函数来控制 CORS。处理器函数可以在请求到达之前或响应发送之前对请求和响应进行更改,这就为我们提供了控制 CORS 的机会。

让我们看一个控制 CORS 的处理器函数示例:

------ - ----- - ---- ---------------------------------------

----- ------ - ------- ----- ---- ---

--------------------------------------

--- ----- ------ --- -- ------- -
  ----- ------- - --- ----------
  ------------------------------------------ -----
  ------------
    -------------------------------
    ----- ----- ---- ------- --------
  --
  ------------------------------------------- ----------------
  
  -- ----------- --- ---------- -
    -------------
      ------- ----
      --------
    ---
  - ---- -
    -------------
      --------
      ----- ------ -------
    ---
  -
-

在这个示例中,我们创建了一个处理器函数,它对接收到的每个请求响应时都添加了适当的 Access-Control-Allow-* 头。如果请求方法是 OPTIONS(即预检请求),则只返回包含允许的方法、头和源信息的头部响应。否则,我们以如上的函数和响应主体来响应请求。

我们可以通过在已启动这个服务器的命令行中添加 --allow-net 权限来运行此示例。

这段代码添加了允许任何源访问我们的服务器的头。在实际生产环境中,请考虑更细粒度地控制允许访问的源,以避免安全风险。例如,你可以在请求头中发送一个 token,允许特定的来源,或者使用 Deno 提供的安全 API 接口实现访问控制,以便只允许受信任的来源访问。

结论

CORS 是一个重要的 Web 应用程序安全特性,可在 Deno 中使用处理器函数轻松控制。我们可以为响应添加 Access-Control-Allow-* 头来允许来自其他源的资源访问,以从其他源请求资源,并确保请求和响应的头和主体正确处理,来控制跨域访问。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6700e7b30bef792019add4d3


猜你喜欢

  • 如何使用 Chai 测试异步函数?

    在前端开发中,我们经常会编写异步函数。但是,异步函数的测试可能会对初学者造成一定程度的困扰。在这篇文章中,我们将介绍如何使用 Chai 来测试异步函数。 异步函数的测试 在介绍如何使用 Chai 测试...

    16 天前
  • Headless CMS 深入剖析:4 种数据结构的比较

    随着前端技术的快速发展,以及云计算和人工智能的广泛应用,Headless CMS(无头 CMS)越来越受到关注和重视。它与传统的 CMS 不同,它只负责管理数据,而不负责生成网页。

    16 天前
  • Babel 7 总结:是否应该停留在 Babel 6?

    Babel 是一种将 ES6+ 代码转换为向后兼容的 JavaScript 代码的工具。前些年的应用基本上都是以 Babel 6 为基础的,但是 Babel 最近发布了 7.0 版本,这个版本带来了很...

    16 天前
  • RxJS Singleton Service:一次性加载一个服务

    在现代 Web 开发中,前端构架不断发展。随着应用程序的复杂性不断增加,开发人员使用了更多的框架和库来帮助他们构建功能丰富的应用程序。但是,对于许多应用程序,单例模式可能是一个更好的解决方案。

    16 天前
  • React Native 应用性能优化实践

    React Native 是一个基于 React 的跨平台开发框架,可以用一份代码同时开发 iOS 和 Android 应用。在开发 React Native 应用时,我们不仅需要注意代码的质量,还需...

    16 天前
  • Redis 集群中的键查询问题

    在 Redis 集群中,键查询是一个常见的操作。不过,在某些情况下,这个操作可能会成为性能瓶颈。本文将介绍如何在 Redis 集群中更有效地进行键查询操作,并提供一些示例代码和指导意义。

    16 天前
  • Web Components 常见问题解决方案

    引言 在前端开发中,组件化思想已经越来越受到关注,Web Components 技术作为浏览器原生支持的组件化方案,也越来越被开发者所青睐。但是,在使用 Web Components 过程中,还会遇到...

    16 天前
  • 使用 Fastify 优化 Node.js Web 应用性能

    Node.js 是一种非常流行和强大的服务器端 JavaScript 编程语言,已经被广泛应用于 Web 开发领域。然而,如今的 Web 应用已经不仅仅只是简单的请求响应了。

    16 天前
  • 如何解决 Angular 传递参数失败的问题

    Angular 是一个相当流行的前端框架, 大多数的 Web 应用程序都是由多个组件构成的。当组件需要之间相互通信时,传递参数就变得非常重要。然而, 有时候我们会发现传递参数失败了。

    16 天前
  • 基于 CSS Grid 实现的响应式笔记

    在现代的前端开发中,响应式设计已经成为了必备的技能之一。而在响应式布局中,CSS Grid 建立了一个高效、灵活的系统,使得设计师和开发者能够更好地控制网页的布局和组织。

    16 天前
  • 在 Jest 单元测试中使用依赖注入方法和重写现有模块

    前言 随着前端技术的不断发展,单元测试也越来越重要。而对于前端开发者来说,Jest 是一个非常好用的单元测试工具。在这篇文章中,我们将探讨如何在 Jest 中使用依赖注入方法和重写现有模块,以便更好地...

    16 天前
  • 如何使用 Deno 实现服务端渲染

    前言 服务端渲染(Server-Side Rendering, SSR)在前端开发中有着重要的应用,它可以提高首屏的加载速度和SEO优化等方面的问题。在Node.js环境下,我们可以使用一些框架如Ex...

    16 天前
  • Chai-HTTP:使用 Chai 进行 HTTP 请求测试

    在前端应用的开发中,我们经常需要测试我们的 HTTP 请求是否正确。而 Chai-HTTP 这个工具就是一个基于 Chai 的插件,它可以让我们方便地进行 HTTP 请求测试的编写。

    16 天前
  • Vue 和 Element-UI 封装自定义表单组件模板

    作为前端开发人员,我们常常需要使用表单来收集用户的输入数据。但是,当表单的需求变得复杂时,我们通常需要考虑自定义表单组件的实现。在本文中,我们将介绍如何使用 Vue 和 Element-UI 封装自定...

    16 天前
  • Headless CMS 实践:用 Contentful 和 AngularJS 构建站点

    前言 Headless CMS,又称无头 CMS,是指不带页面展示的内容管理系统。与传统 CMS 不同,Headless CMS 不关心内容如何展示,它只负责提供内容的 API 接口,让开发者根据自己...

    16 天前
  • RxJS 6 的新特性 ——pipeable operators

    RxJS 是一个强大的响应式编程库,它的早期版本中,操作符是以链式调用的方式实现的,例如:source.map().filter().switchMap()。这种方式虽然直观,但是当需要组合多个操作符...

    16 天前
  • Redux-thunk 之 saga 和 observables 的区别

    在 React 应用程序的开发中,Redux 一直是最受欢迎的状态管理库之一。然而,随着 React 应用程序变得越来越复杂,Redux 开发者们不断在寻找一些改进这个流程的方案。

    16 天前
  • HapiJS Request 对象中的本地数据

    HapiJS Request 对象中的本地数据 HapiJS 是一个基于 Node.js 的开源 Web 框架,它提供了一种简单、强大的方法来构建 Web 应用程序。

    16 天前
  • 使用缓存优化高并发场景下的 Web 应用性能

    随着网络技术的不断发展和人们对网络应用的需求增加,Web 应用的高并发成为了一种趋势。然而,高并发场景下的 Web 应用常常会遇到性能瓶颈,影响用户体验。缓存技术可以很好地解决这个问题,本文将详细探讨...

    16 天前
  • Deno 安全性及其对 Node.js 的优势

    Deno 是一个新兴的服务器端 JavaScript 运行时,与 Node.js 相似,但有许多重要的区别。其中最重要的是 Deno 的安全性。 Deno 的安全性 Deno 在安全性方面具有以下几个...

    16 天前

相关推荐

    暂无文章