如何解决在 Deno 中跨域问题?

阅读时长 6 分钟读完

在 Deno 中,如果我们想要从一个域名的服务器上请求数据,而这个请求是给另外的一个域名的服务器,这时便会出现跨域问题。这种情况下,浏览器会阻止这个请求并抛出一个错误。而如何解决这个问题呢?本文将会深入探讨跨域问题以及如何在 Deno 中解决这个问题。

跨域问题的原因

跨域问题产生的原因是由于浏览器出于安全考虑,禁止浏览器内的 JavaScript 在异步请求时,去请求另一个域名下的资源,除了 CORS 这种方式可以解决外,还有其他方式可以绕过浏览器的限制。

具体来说,同源政策是浏览器对 JavaScript 实施的一个安全限制,它要求如果两个 script 的 URL 的协议、域名、端口号中有任何一个不同,浏览器都直接禁止他们之间的交互,完全无视 JavaScript 代码本身的意愿。这样做是出于安全考虑:因为不同的域名下的代码之间可以互相访问和操作对方的数据和功能,如果这种互相信任的关系被攻击者利用,可能就会造成极大的安全威胁,更有甚者,可能还会造成服务器的数据泄露甚至是服务拒绝攻击。

如何解决跨域问题

解决跨域的问题可以通过以下策略来实现:

1. CORS

CORS 是一种标准协议,主要是在服务端设置一些 HTTP 的头部信息,实现跨域请求的安全性,客户端(HTML、XMLHttpRequest 等)向服务器端发送请求时,可以附加一些 Origin 字段的标识,说明请求的来源是哪个地址;服务器通过检查这些头信息,来判断是否允许这个请求

在 Deno 中,通过实现以下代码实现 CORS:

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

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

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

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

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

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

这样后端应用程序将会接受来自任何地方的登录请求,如上所述,这是缺乏安全性的。

2. JSONP

JSONP 的实现需要服务端的支持,其思路在于利用 JSONP 标签可以引入任何 URL 的特性,来实现跨域请求。采用这种方式时,客户端需要在 DOM 树上加上一个新的 script 标签,这个 script 标签引用了服务端的一个地址,需要服务端将请求的 JSON 数据以 JavaScript 代码的方式包装起来,将数据作为这个函数的参数传递,并返回给客户端执行,客户端通过对这个回调函数的处理来实现对数据的解析。

在 Deno 中,通过实现以下代码实现 JSONP:

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

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

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

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

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

这里我们在 "/jsonp" 地址上提供了一个 JSONP 接口。

3. 代理

代理的实现方式是先将请求发送给本地的服务器,本地服务器再将请求发送给目标服务器。这种方式的好处是在请求过程中可以多次拦截,增加安全性的同时,因为是本地服务器向另一个本地服务器发送请求,所以跨域问题也得以解决。

在 Deno 中,通过实现以下代理服务器代码模板实现代理:

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

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

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

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

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

这里使用了 proxy 函数,将请求代理到目标服务器,其中 PROXY_HOST 为目标服务器的地址,如需代理多个地址,可以将这个值设置为数组,依次代理。

总结

这篇文章较为详细的讲述了跨域问题的本质原因以及解决跨域问题的三种方法:CORS、JSONP 和代理。需要注意的是,每一种方法都有其优缺点,需要结合实际情况进行选取。在解决跨域问题时,需要综合考虑安全性、易用性以及性能等多方面的因素,并进行权衡。希望这篇文章能对前端开发者在 Deno 环境下解决跨域问题有所帮助。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/647190b1968c7c53b0f6cf1f

纠错
反馈