關於laravel架構的跨域請求/jsonp請求的理解

標籤：socket   通過   網址   head   use   put   asc   哪些   項目   

最近剛接觸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，我就不多說了。

第一次寫總結，哈哈，就寫這麼多了。

 

關於laravel架構的跨域請求/jsonp請求的理解