Laravel 响应:返回 JSONP Draft
应用场景
程序写多了,总会遇到向其他域名请求资源的时候。
想用普通的请求方式?浏览器可是不答应的。这就引出了常见的 跨域请求问题。
举例说明:
前端页面 http://a.com/1.html 中的 js 向服务器 http://b.com/2.php 获取数据,如果用普通的 AJAX 方式,就会被浏览器认为是跨域不安全而拦截。
JSONP 的诞生
为了解决上述问题,逐渐形成了一种非正式传输协议 --- JSONP,全称是 JSON with Padding ( 填充式 JSON 或参数式 JSON )。就是为了让所有浏览器都能够跨域名调用。
原理
JSONP的实现原理很简单,利用 <script>
标签没有同源限制的特点,也就是 <script>
的 src 链接可以访问不同的域名。
我们访问服务端,一般是获取存 JSON 数据,而 JSONP 则返回的是,包含函数的数据,将我们需要的 JSON 数据作为函数的参数。
callback({"name": "xuthus"})
我们在客户端,通过 <script>
标签的 src
访问带有 callback
查询参数的请求,来获取返回带有函数的数据,然后执行它
// jsonpCallback 函数的具体逻辑,可以根据拿到的数据随意定义啦
<script>
function jsonpCallback(result) {
console.log(result)
}
</script>
// 跨域请求数据,预期返回 jsonpCallback 函数
<script src="http://localhost:3000/user?callback=jsonpCallback"></script>
我们先定义了回调函数 jsonpCallback
,然后通过另外一个 <script>
标签获取数据,返回如下:
jsonpCallback({
"name": "xuthus"
})
返回后就会执行这个这个函数,就可以得到我们想要的 JSON 数据了。
用 Laravel 轻松实现 JSONP
Laravel 将其封装得极具简单,只需将 json
方法与 withCallback
方法结合就可以实现这一需求:
return response()
->json(['name' => 'Abigail', 'state' => 'CA'])
->withCallback($request->input('callback'));
输出:
jsonpCallback({
"name": "Abigail",
"state": "CA"
})
总结
JSONP 完美解决了在测试或者开发中获取不同域下的数据。
推荐文章: