关于laravel框架的跨域请求/jsonp请求的理解

Posted 2020-09-08

最近刚接触laravel框架，首先要写一个跨域的单点登录。被跨域的问题卡了两三天，主要是因为对跨域这快不了解，就在刚才有点茅塞顿开的感觉，我做一下大概整理，主要给一些刚接触摸不着头脑的看，哪里写得不对的，也请大神指点，言归正传：

1.先用通俗易懂的话说下原理和几种跨域的方式，因为网上一搜都是追对某一种方式的专业性解答，我是消化不了多少。

     第一种：jsonp 方式，这是什么方式呢，先要说一说javascript，在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）,也就是说JS只能访问当前项目的页面。AJAX是基于XMLHttpRequest（这个请自行百度了解）实现的，所以AJAX 一类的请求肯定也是不能跨域请求的。 然后jsonp方式呢，虽然一般是再$.ajax 方法里面设置dataType: ‘jsonp‘，但是发送请求出去的时候，已经跟ajax 没多少关系了，不管你设置type ： get 还是 post ,它都是通过get发送请求的，可以说这个已经属于 jsonp 协议了，这是个非官方协议。发一下代码：

$.ajax({
url: ‘http://lrz.laravel.com/auth/login‘,
type: ‘get‘,
dataType: "jsonp",
jsonp: "callback",
data: {user_id:user_id,name:name},
success: function (data) {
console.log(data);
},
error:function()
{
alert("error");
}
})

当设置dataType 为 jsonp的时候就是jsonp请求了，然后 下面的 jsonp: "callback", 什么意思呢，jsonp方式会在客户端注册一个 js 的 callback方法，并通过GET方式发送到服务器，见连接：  

1. Request URL:
   http://lrz.laravel.com/auth/login?callback=jQuery21307739646233126818_1491549029207&user_id=1&name=%E5%90%95%E7%91%9E%E6%94%BF&_=1491549029208

jQuery21307739646233126818_1491549029207 这个方法就是客户端注册的。

然后服务器端怎么处理呢，接收 callback 的值，并返回一个JS方法的方式告知客户端，就是  return jQuery21307739646233126818_1491549029207(json_encode([1,2])); 这样的方式，客户端才能通过success: function (data) {} 获取到返回的值了，这就是通过JS注入的方式实现的 跨域请求，顺便我发一下 laravel 的返回方式：

$callback = $request->input(‘callback‘);

$arr = array(‘status‘=>‘200‘);
$user_id = $request->input(‘user_id‘);
$name = $request->input(‘name‘);
return response($callback.‘(‘.json_encode($arr).‘)‘)->withCookie(Cookie::forever(‘name‘, $name))->withCookie(Cookie::forever(‘user_id‘,$user_id));

这么写是为了生成服务器端的cookie，用不着的小伙伴就忽略。

 

第二种方式就是通过html5 WebSocket标准 W3C方式，这个我一开始跟JSONP 弄混了，这个跟jsonp 又没关系了，这种方式通过设置一下头部信息就能实现跨域了，

Access-Control-Allow-Origin : 指明哪些请求源被允许访问资源，值可以为 "*"，"null"，或者单个源地址。

服务器端主要设置这个值就能让其他的网址访问他了，用AJAX就能拿到服务器的数据了，我突然感觉这个方式好简单.. 已经能满足我的需求了，比jsonp 方式还安全。关于laravel的开启跨域方式可以看这篇文章： http://www.tuicool.com/articles/3yEFVz2，我就不多说了。

第一次写总结，哈哈，就写这么多了。