跨域的四種方式
摘要：
本文主要是關於跨域的幾種方式，關於什麼是跨域這裡就不多說了，寫這個也是為了記住一些知識點的。
一. jsonp
jsonp的跨域方式很容易理解，頁面的的每一個script標籤瀏覽器都會發送get請求獲取對應的文字資源，獲取到了之後，會將獲取回來的指令碼直接執行，jsonp就是利用這個原...
本文主要是關於跨域的幾種方式，關於什麼是跨域這裡就不多說了，寫這個也是為了記住一些知識點的。
一. jsonp
jsonp的跨域方式很容易理解，頁面的的每一個script標籤瀏覽器都會發送get請求獲取對應的文字資源，獲取到了之後，會將獲取回來的指令碼直接執行，jsonp就是利用這個原理，在伺服器寫一個介面，接收請求的引數和結果回撥的函式，在請求介面前應該要事先定義好要回調的函式，通過script標籤請求之後得到的script會直接執行，大概的流程如下：
// 瀏覽器端，已經定義好了函式A
function A(str) {
console.log(str);
}
//伺服器端
function getData(method) {
return method + '("Hello Jsonp")';
}
瀏覽器端會動態新增某個script標籤
<script src="....../getData?method=A"></script>
請求這個script標籤返回的就是 A("Hello Jsonp")
會立即執行這個函式，A("Hello Jsonp")裡面的"Hello Jsonp"就是實際要取的資料
二.Cors
這種跨域方式需要後端的支援，需要在後端返回介面之前設定返回的頭部Access-Control-Allow-Origin
具體的實現方法要根據你用的後端的方法來設定，我用的是asp.net mvc，實現的方法有很多，其中實現的一個方法如下：
1、建立一個attribute
public class AllowCrossSiteJsonAttribute : ActionFilterAttribute
{
public override void OnActionExecuting(ActionExecutingContext filterContext)
{
filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", "*");
base.OnActionExecuting(filterContext);
}
}
2、應用到Controller中的Action
[AllowCrossSiteJson]
public ActionResult YourMethod()
{
return Json("data");
}
三.配置伺服器反向代理
此種跨域方式需要伺服器，如nginx和IIS的支援，nginx的反向代理我不是很瞭解，網上看的別人的配置是這樣的，有需要的可以瞭解一下：
// proxy伺服器
server {
listen80;
server_namewww.domain1.com;
location / {
proxy_passhttp://www.domain2.com:8080;#反向代理
proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie裡域名
indexindex.html index.htm;
# 當用webpack-dev-server等中介軟體代理介面訪問nignx時，此時無瀏覽器參與，故沒有同源限制，下面的跨域配置可不啟用
add_header Access-Control-Allow-Origin http://www.domain1.com;#當前端只跨域不帶cookie時，可為*
add_header Access-Control-Allow-Credentials true;
}
}
IIS的話，可以參考一下這個iis7.5做反向代理配置方法例項圖文教程
四.使用websocket
websocket和http都是基於tcp的應用層協議，websocket協議和tttp協議的主要區別是websocket支援跨域，建立的是長連線，連線是雙向的。我自己用c#和nodejs的socket.io寫過一些demo，但是沒有在實際工作中用過，所以對這一塊瞭解不深。