跨域的四種方式

本文主要是關於跨域的幾種方式,關於什麼是跨域這裏就很少說了,寫這個也是爲了記住一些知識點的。html

一. 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,實現的方法有不少,其中實現的一個方法以下:node

一、建立一個attribute
public class AllowCrossSiteJsonAttribute : ActionFilterAttribute
{
    public override void OnActionExecuting(ActionExecutingContext filterContext)
    {
        filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", "*");
        base.OnActionExecuting(filterContext);
    }
}
二、應用到Controller中的Action
[AllowCrossSiteJson]
public ActionResult YourMethod()
{
    return Json("data");
}

三.配置服務器反向代理

此種跨域方式須要服務器,如nginx和IIS的支持,nginx的反向代理我不是很瞭解,網上看的別人的配置是這樣的,有須要的能夠了解一下:webpack

// proxy服務器
server {
    listen       80;
    server_name  www.domain1.com;
    location / {
        proxy_pass   http://www.domain2.com:8080;  #反向代理
        proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie裏域名
        index  index.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作反向代理配置方法實例圖文教程nginx

四.使用websocket

websocket和http都是基於tcp的應用層協議,websocket協議和tttp協議的主要區別是websocket支持跨域,創建的是長鏈接,鏈接是雙向的。我本身用c#和nodejs的socket.io寫過一些demo,可是沒有在實際工做中用過,因此對這一塊瞭解不深。web

相關文章
相關標籤/搜索