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