在前端开发中，跨域问题是一个常见的问题。它指的是在使用 XMLHttpRequest 或 Fetch 进行 AJAX 请求时，请求的 URL 的域名与当前页面的域名不一致，导致浏览器拒绝请求的问题。本文将介绍在 Deno 中如何处理跨域问题。
什么是跨域？
在 Web 中，同源策略是一种基本的安全策略，它限制一个域下的资源只能被同域下的页面访问。同源指的是协议、域名、端口号完全相同，如 https://example.com 和 https://example.com:80，即使二者只是端口号不同，也算跨域。
跨域的问题一般出现在 AJAX 请求、WebSocket、postMessage、CSS @font-face 和 标签的跨域加载等场景中。
如何在 Deno 中处理跨域？
- CORS（Cross-Origin Resource Sharing）跨域资源共享
CORS 是一种浏览器机制，它能够预处理 AJAX 请求，并决定是否允许跨域访问。Deno 提供了一个第三方的 cors 模块，可以安装使用。使用示例如下：
安装 cors 模块
-- -------------------- ---- -------
------ - ----------- - ---- ---------------------------------
------ - ------- - ---- ----------------------------------
----- --- - --- --------------
--------
---------
------- ------------------------
---
--
------------ ----- ---- ---启动服务
deno run --allow-net server.ts
在客户端使用 AJAX 请求时，在请求头中加入 Access-Control-Allow-Origin 字段即可：
const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:8000/api/data');
xhr.setRequestHeader('Access-Control-Allow-Origin', 'http://localhost:8080');
xhr.send();- JSONP（JSON with padding）跨域请求
JSONP 是一种破解跨域限制的方式。它通过在页面上动态创建 <script> 标签，把需要请求的数据通过 JavaScript 代码的方式传递到当前页面中。在 Deno 中，可以使用下面的代码实现：</p> <h3>客户端</h3> <pre class="prettyprint ">-- -------------------- ---- ------- -------- ---------- --------- - ----- ------ - --------------------------------- ---------- - ------------------------------ ---------------------------------- - --------------------------------------- ------ -- - ------------------ ---</pre><h3>服务端</h3> <pre class="prettyprint ">-- -------------------- ---- ------- ------ - ----- - ---- --------------------------------------- ----- ------ - ------- ----- ---- --- -------- ---------- ---- --------- --------- - ----- -- - ---------------------- ----- ------ - --- -------------------- ----- ------------ - ----------------------- ----- ---- - ---------------- ----- ----- ---- -- --- ------------- ----- --------------------------- --- - ----- -------- ----------- ---- - -- ----------- --- ------ - -- ------------------------------- - ---------- ------------ - - - --- ----- ------ --- -- ------- - ------------ -</pre><p>我们可以看到，服务端返回的是一个函数调用，而不是 JSON 格式的数据。这里我们使用了 URLSearchParams 来获取请求参数中的 callback 值，并在返回的数据中加入了这个函数回调。</p> <h2>总结</h2> <p>Deno 提供了多种处理跨域的方式，我们可以根据实际需求来选择相应的方式。在开发中遇到跨域问题时，首先要考虑的是这是一个合法的跨域请求，是否可以通过 CORS 机制来处理。如果 CORS 机制无法解决，我们可以使用 JSONP 这样的方式进行处理。</p> <blockquote> <p>来源：<a href="https://www.javascriptcn.com/post/64f860dff6b2d6eab3074f37">JavaScript中文网</a> ，转载请注明来源 <a href="https://www.javascriptcn.com/post/64f860dff6b2d6eab3074f37">https://www.javascriptcn.com/post/64f860dff6b2d6eab3074f37</a></p> </blockquote>