跨域的四種方式

StonePanda 發布于2019-08-23 15:26 / 1195人閱讀

摘要：本文主要是關于跨域的幾種方式，關于什么是跨域這里就不多說了，寫這個也是為了記住一些知識點的。我自己用和的寫過一些，但是沒有在實際工作中用過，所以對這一塊了解不深。

本文主要是關于跨域的幾種方式，關于什么是跨域這里就不多說了，寫這個也是為了記住一些知識點的。

一. jsonp

jsonp的跨域方式很容易理解，頁面的的每一個script標簽瀏覽器都會發送get請求獲取對應的文本資源，獲取到了之后，會將獲取回來的腳本直接執行，jsonp就是利用這個原理，在服務器寫一個接口，接收請求的參數和結果回調的函數，在請求接口前應該要事先定義好要回調的函數，通過script標簽請求之后得到的script會直接執行，大概的流程如下：

// 瀏覽器端，已經定義好了函數A
function A(str) {
  console.log(str);
}

//服務器端
function getData(method) {
  return method + "("Hello Jsonp")";
}

瀏覽器端會動態添加某個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 {
    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做反向代理配置方法實例圖文教程

四.使用websocket

websocket和http都是基于tcp的應用層協議，websocket協議和tttp協議的主要區別是websocket支持跨域，建立的是長連接，連接是雙向的。我自己用c#和nodejs的socket.io寫過一些demo，但是沒有在實際工作中用過，所以對這一塊了解不深。

GPU云服務器云服務器對數據倉庫分析的四種方式 activity的四種狀態數據遷移的四種方法 java中線程的四種狀態

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102053.html

javasscript - 收藏集 - 掘金

摘要：跨域請求詳解從繁至簡前端掘金什么是為什么要用是的一種使用模式，可用于解決主流瀏覽器的跨域數據訪問的問題。異步編程入門道典型的面試題前端掘金在界中，開發人員的需求量一直居高不下。 jsonp 跨域請求詳解——從繁至簡 - 前端 - 掘金什么是jsonp？為什么要用jsonp?JSONP(JSON with Padding)是JSON的一種使用模式，可用于解決主流瀏覽器的跨域數據訪問的問題...

Rango 2019-08-20 17:15 評論0 收藏0
「JavaScript」JS兩種服務端相關跨域方法詳解

摘要：之前我們講了一下四種跨域的方式四種跨域方式詳解。這四種方式是使用純來進行跨域的。今天就介紹兩種有涉及到服務器的跨域技術。之前我們講了一下四種 JavaScript 跨域的方式 - 「JavaScript」四種跨域方式詳解。這四種方式是使用純 JavaScript 來進行跨域的。今天就介紹兩種有涉及到服務器的跨域技術。一、反向代理服務器基礎思想很簡單，將你的服務器配置成需要跨域...

kid143 2019-08-21 10:39 評論0 收藏0
react關于事件綁定this的四種方式

摘要：在組件中，每個方法的上下文都會指向該組件的實例，即自動綁定為當前組件而且還會對這種引用進行緩存，以達到和內存的最大化。在react組件中，每個方法的上下文都會指向該組件的實例，即自動綁定this為當前組件,而且react還會對這種引用進行緩存，以達到cpu和內存的最大化。在使用了es6 class或者純函數時，這種自動綁定就不復存在了，我們需要手動實現this的綁定以下是幾種綁定的方...

張利勇 2019-08-22 15:12 評論0 收藏0
同源策略與跨域

摘要：簡單地理解就是因為同源策略的限制，它是瀏覽器為了安全性考慮一種非常重要的策略，域名下的無法操作或是域名下的對象。同源策略會限制以下三種行為和無法讀取。例如中可以引用等資源，此類操作不受同源策略限制。同源策略同源策略same origin policy中的重要內容就是URL（uniform resource locator）,統一資源定位符，俗稱網址。URL中的resource資源就...

xavier 2019-08-26 12:09 評論0 收藏0