Node.js 中如何处理跨域请求

阅读时长 5 分钟读完

什么是跨域请求

跨域请求指的是不同域名或不同端口之间的网络请求。由于同源策略的限制,浏览器通常不允许跨域请求,这会带来前端开发中的一些问题,例如前后端分离的开发模式下,前端需要调用不同域名或不同端口的接口。

如何处理跨域请求

JSONP

JSONP 是一种跨域请求的方式。它利用了 script 标签的 src 属性不受同源策略限制的特点,通过动态创建 script 标签来获取数据。例如:

在服务端返回的数据中,需要将数据包裹在一个函数调用中,函数名由客户端传递的 callback 参数确定。例如返回的数据为:

客户端利用 callback 参数指定的函数名,即可获取到数据。

JSONP 的缺点是只支持 GET 请求,且容易被 XSS 攻击利用。

CORS

CORS(Cross-Origin Resource Sharing)是一种官方标准化的跨域请求方式。CORS 分为简单请求和非简单请求两种。

简单请求满足以下条件:

  • 请求方法为 GET,HEAD 或 POST
  • 请求头部不超出以下几种字段:Accept、Accept-Language、Content-Language、Content-Type(但仅限于三个值:application/x-www-form-urlencoded、multipart/form-data、text/plain)
  • 请求中的 body 为空或者包含了简单字符(仅限于 ASCII 码)

在服务端设置 Access-Control-Allow-Origin 头部,允许指定域名或通配符 *,即可实现跨域请求。例如以下代码:

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

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

--------------------
展开代码

访问 http://localhost:8080/data 可以获取到数据。

非简单请求需在发送请求之前发送 OPTIONS 请求,服务端通过设置 Access-Control-Allow-* 头部来处理该请求。OPTIONS 请求和 GET/POST 请求之间还需要进行一次预检请求,以确保客户端没有可能触发 CORS 安全风险。CORS 的优点是能够支持所有 HTTP 请求方法,且更加安全。

示例代码

客户端代码

-- -------------------- ---- -------
-------- --------- -
  ----- --- - --- -----------------
  --------------- ------------------------------
  ---------------------- - -------- -- -
    -- --------------- --- - -- ---------- --- ---- -
      ------------------------------
    -
  --
  -----------
-
----------
展开代码

服务端代码

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

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

--------------------
展开代码

总结

了解和使用以上两种跨域请求方式,可以帮助前端开发人员更好地处理前后端分离的开发,并提高应对异构系统的能力。需要注意的是,在使用跨域请求时,除了技术上的问题,还需要注意安全性问题。

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

纠错
反馈

纠错反馈