什么是跨域请求
跨域请求指的是不同域名或不同端口之间的网络请求。由于同源策略的限制，浏览器通常不允许跨域请求，这会带来前端开发中的一些问题，例如前后端分离的开发模式下，前端需要调用不同域名或不同端口的接口。
如何处理跨域请求
JSONP
JSONP 是一种跨域请求的方式。它利用了 script 标签的 src 属性不受同源策略限制的特点，通过动态创建 script 标签来获取数据。例如：
function getData(callback) { var script = document.createElement('script'); script.src = 'https://example.com/data?callback=' + callback; document.head.appendChild(script); } getData(function(data) { console.log(data); });
在服务端返回的数据中，需要将数据包裹在一个函数调用中，函数名由客户端传递的 callback 参数确定。例如返回的数据为：
callback({name: 'Alice', age: 18});
客户端利用 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
