什么是跨域请求
跨域请求指的是不同域名或不同端口之间的网络请求。由于同源策略的限制，浏览器通常不允许跨域请求，这会带来前端开发中的一些问题，例如前后端分离的开发模式下，前端需要调用不同域名或不同端口的接口。
如何处理跨域请求
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