CORS(Cross-Origin Resource Sharing)是 Web 开发中常见的跨域限制,它是一种机制,限制一个源(协议、域名和端口)中的 Web 应用程序在另一个源中使用资源。在 Deno 中,遇到 CORS 会出现类似下面的错误:
------ -- ----- -- ------------------------ ---- ------ ----------------------- --- ---- ------- -- ---- ------- -- ----------------------------- ------ -- ------- -- --- --------- --------- -- -- ------ -------- ------ ---- ------ --- --- --------- ---- -- --------- -- ----- --- -------- ---- ---- ---------
这意味着当前请求无法访问来自目标网站的资源。本文将介绍如何在 Deno 中处理 CORS 跨域请求。
什么是 CORS
CORS 是一个浏览器安全机制,用于防止 Web 应用程序从非目标源或域上读取或更改资源,它需要目标源在响应头部中添加以下内容:
---------------------------- - --------------------------------- ---- ----------------------------- ------------ ----------------------------- ---- ----- ---- ------
其中:
Access-Control-Allow-Origin
用于控制请求允许的来源,* 表示任何来源,特定来源的话就将 * 替换为对应域名。例如Access-Control-Allow-Origin: https://www.example.com
。Access-Control-Allow-Credentials
用于控制是否允许跨域携带 cookie 身份认证。如果需要携带 cookie 身份认证,就需要将其设为 true。Access-Control-Allow-Headers
用于控制请求头部允许携带的参数,例如 Content-Type 等。Access-Control-Allow-Methods
用于控制请求允许的方法,例如 GET, POST, PUT, DELETE 等。
解决 CORS 的方法
通常情况下,我们可以在服务器端部署一个代理服务进行资源的访问。这种方式存在一些问题,如维护代理服务器等。Deno 提供了一种方式来解决这个问题,即在 Deno 中处理 CORS 跨域请求。
先安装一个 Deno 的库 https://deno.land/x/cors
------ - ----- - ---- --------------------------------------- ------ - ---------------- ---------------------- --------------------- ---------- - ---- ---------------------------------- ------ - -------------- - ---- ----------------------------------------- ------ - ----------- --------------- -- -------- - ---- ---------------------------------- ------ - ---- - ---- ---------------------------------- ----- ------ - ------- ----- ---- --- --- ----- ------ --- -- ------- - -- ----------- --- ----- -- ------- --- ---- - ----- ------- - --- ---------- --------------------------- ------------- ------------- ----- ----- -------------------------- ------- --- ------- - -- ---- -- ----------- --- ---------- - ------------- -------- ------ ------- ------------------------- -- ---- -------- ------- -------- --------------- ----------------- ------------ ---- --- --- ------- - -- ------------------ - -- ---- --------- ---- ------------- ------- --- --- ------- - --- - ----- - ----- -- ---------- -- ---------- ------- - - ---- ----- ------ - ----- ----------------- ----- ---------- ---------- -------- --- ------------------- ------------- --- ----- ------ -- -- ------- - -- ------- -- --- --------- - ---------------------- ---- ----- ---------------- - ---- -- --- ---------- ----------- - ------------------------ ---- - ---- -- -------------------------- - ----- -- ----- - --- ---------------------- ------ - ---- -- --------------------------- - ----- - ----- ------ - - --- ----------------------- ----- -------- - - - ----- ----- - --------------------- -- ------ ---------- --------- - -
这里的 cors
函数将会返回一个对象,它是一个跨域响应头部对象,其中包含了 CORS 所需的相关参数。其中,origin
参数代表请求方根据规则访问服务器时所使用的协议、IP、端口等元素;methods
代表支持的请求方法;allowedHeaders
代表支持携带的请求头类型;credentials
代表是否允许携带身份验证信息。
这里我们的 cors
函数中的参数说明如下:
- origin: 是一个 string 类型,代表请求方的机器地址,这个地址是由请求方通过浏览器等中间件提交到服务器的地址,具体的格式就是协议+域名+端口。
- methods: 是一个 string 数组类型,代表支持的请求方法,默认只有 GET, POST, HEAD,但是如果需要其它请求方法则需要像这样传递如下值:['OPTIONS', 'GET', 'HEAD', 'PUT', 'PATCH', 'POST', 'DELETE']
- allowedHeaders: 是一个 string 数组类型,代表支持的请求头部字段列表
- credentials: 是一个 boolean 类型,代表是否允许发送 cookie 等身份认证信息,默认不允许
示例代码
------ - ------------ ------ - ---- --------------------------------- ------ - ------- - ---- ------------ ----- ------ - --- --------- ------ --------- ----- -- - ----------------- - ------- ------- -- ------------- ----- -- - ----------------- - ------- ------- --- ----- --- - --- -------------- ------------------- ------------------------- --------------------------------- ----- ------------ ----- ---- ---
注意,这里的 oakCors
函数是从 cors.ts
文件中导出的,它的具体实现如下:
------ ----- ------- - - ------- ------ - ---- -------- -------- - ------- ------ ------- --------- -------- -------- -------- -------- - --- -------- - ------------------ -------- -------- ------- - - -- -- ---------- -- - ------ ----- -------- ------------ ----- - ----- --------- - ---------------------------------- -- ---------- --- ---- -- --------- --- ---------- - -- ------- --- ---- - -- --------------------------------------------------- - -------------------------------------------------------- --------------------------------------------------------- -- ---- - ------------------------------------------------------- ----------- - ---- -- ------- ------ --- -------- -- --------- --- ------- - ------------------------------------------------------- -------- - ---- -- ---------------------- -- --------------------------- - ------------------------------------------------------- ----------- - -- -------------------------- - --------------------------------------------------------------- -------- - ----------------------------------- ---------- ----------------------------------------------------------- ------------------- ----------------------------------------------------- --------------------- -- -------- -- --------------- --- -- - ----------------------------------------------------------- ------------------- - - -- ------------------- --- ---------- - ------------------- - ---- - ----- ------- -- --
该方法使用 Oak 框架实现,可以设置 origin、方案、headers 以及 allowCredentials 的限制。
总结
CORS 机制针对跨域限制,是 Web 开发中常见的一种限制机制,它限制了 Web 应用程序在另一个源中使用资源。在 Deno 中可以通过改变头文件来解决该问题,也可以通过 CORS 库来解决,从而让 Deno 更加灵活和开放。如果你还没有尝试过 Deno,可以试试这门新的 JavaScript 运行时,说不定会有不一样的感受。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/649d13a748841e98949cbaa8