導航:首頁 > 解決方法 > web解決跨域的三種方法
web解決跨域的三種方法
發布時間：2022-08-20 02:23:35『壹』 手機APP和web服務端 跨域問題
跨域問題來源於JavaScript的同源策略，即只有 協議+主機名+埠號 (如存在)相同，則允許相互訪問。也就是說JavaScript只能訪問和操作自己域下的資源，不能訪問和操作其他域下的資源。
在以前，前端和後端混雜在一起， 比如JavaScript直接調用同系統裡面的一個Httphandler，就不存在跨域的問題，但是隨著現代的這種多種客戶端的流行，比如一個應用通常會有Web端，App端，以及WebApp端，各種客戶端通常會使用同一套的後台處理邏輯，即API， 前後端分離的開發策略流行起來，前端只關注展現，通常使用JavaScript，後端處理邏輯和數據通常使用WebService來提供json數據。一般的前端頁面和後端的WebService API通常部署在不同的伺服器或者域名上。這樣，通過ajax請求WebService的時候，就會出現同源策略的問題。
需要說明的是，同源策略是JavaScript裡面的限制，其他的編程語言，比如在C#，Java或者iOS等其他語言中是可以調用外部的WebService，也就是說，如果開發Native應用，是不存在這個問題的，但是如果開發Web或者Html5如WebApp，通常使用JavaScript ajax對WebService發起請求然後解析返回的值，這樣就可能存在跨域的問題。
一般的，很容易想到，將外部的資源搬到同一個域上就能解決同源策略的限制的。即在Web網站上同時開發一個Http服務端頁面，所有JavaScript的請求都發到這個頁面上來，這個頁面在內部使用其他語言去調用外部的WebService。即添加一個代理層。這種方式可以解決問題，但是不夠直接和高效。
目前，比較常見的跨域解決方案包括JSONP (JSON with padding)和CORS (Cross-origin resource sharing )。一些解決方案需要客戶端和服務端配合如JSOP，一些則只需要服務端配合處理比如CORS。下面分別介紹這兩種跨域方案，以及服務端WebService如何支持這兩種跨域方案。
JSONP以及WebService的支持
同源策略下，某個伺服器是無法獲取到伺服器以外的數據，但是html裡面的img,iframe和script等標簽是個例外，這些標簽可以通過src屬性請求到其他伺服器上的數據。而JSONP就是通過script節點src調用跨域的請求。
當我們向伺服器提交一個JSONP的請求時,我們給服務傳了一個特殊的參數,告訴服務端要對結果特殊處理一下。這樣服務端返回的數據就會進行一點包裝，客戶端就可以處理。
舉個例子，服務端和客戶端約定要傳一個名為callback的參數來使用JSONP功能。比如請求的參數如下:
http://www.example.net/sample.aspx?callback=mycallback
如果沒有後面的callback參數，即不使用JSONP的模式，該服務的返回結果可能是一個單純的json字元串，比如：
{ foo : 'bar' }
如果和服務端約定jsonp格式，那麼服務端就會處理callback的參數，將返回結果進行一下處理，比如處理成：
mycallback({ foo : 'bar' })
可以看到，這其實是一個函數調用，比如可以實現在頁面定義一個名為mycallback的回調函數：
mycallback = function(data)
{
alert(data.foo);
};
現在，請求的返回值回去觸發回調函數，這樣就完了了跨域請求。
如果使用ServiceStack創建WebService的話，支持Jsonp方式的調用很簡單，只需要在AppHost的Configure函數裡面注冊一下對響應結果進行過濾處理即可。
/// <summary>
/// Application specific configuration
/// This method should initialize any IoC resources utilized by your web service classes.
/// </summary>
/// <param name="container"></param>
public override void Configure(Container container)
{
ResponseFilters.Add((req, res, dto) =>
{
var func = req.QueryString.Get("callback");
if (!func.isNullOrEmpty())
{
res.AddHeader("Content-Type", ContentType.Html);
res.Write("<script type='text/javascript'>{0}({1});</script>"
.FormatWith(func, dto.ToJson()));
res.Close();
}
});
}
JSONP跨域方式比較方便，也支持各種較老的瀏覽器，但是缺點很明顯，他只支持GET的方式提交，不支持其他Post的提交，Get方式對請求的參數長度有限制，在有些情況下可能不滿足要求。所以下面就介紹一下CORS的跨域解決方案。
CORS跨域及WebService的支持
先來看一個例子，我們新建一個基本的html頁面，在裡面編寫一個簡單的是否支持跨域的小腳本，如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AJAX跨域請求測試</title>
</head>
<body>
<input type='button' value='開始測試' onclick='crossDomainRequest()' />
<div id="content"></div>
<script type="text/javascript">
//<![CDATA[
var xhr = new XMLHttpRequest();
var url = 'http://localhost:8078/json/ShopUserLogin';
function crossDomainRequest() {
document.getElementById("content").innerHTML = "開始……";
if (xhr) {
xhr.open('POST', url, true);
xhr.onreadystatechange = handler;
xhr.send();
} else {
document.getElementById("content").innerHTML = "不能創建 XMLHttpRequest";
}
}
function handler(evtXHR) {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var response = xhr.responseText;
document.getElementById("content").innerHTML = "結果：" + response;
} else {
document.getElementById("content").innerHTML = "不允許跨域請求。";
}
}
else {
document.getElementById("content").innerHTML += "<br/>執行狀態 readyState：" + xhr.readyState;
}
}
//]]>
</script>
</body>
</html>
然後保存為本地html文件，可以看到，這個腳本中，對本地的服務http://localhost:1337/json/Hello 發起了一個請求， 如果使用chrome 直接打開，會看到輸出的結果，不允許跨域請求。 在javascript控制台程序中同樣可以看到錯誤提示：
那麼如果在返回響應頭header中注入Access-Control-Allow-Origin，這樣瀏覽器檢測到header中的Access-Control-Allow-Origin，則就可以跨域操作了。
同樣，如果使用ServcieStack，在很多地方可以支持CORS的跨域方式。最簡單的還是在AppHost的Configure函數裡面直接寫入：
/// <summary>
/// Application specific configuration
/// This method should initialize any IoC resources utilized by your web service classes.
/// </summary>
/// <param name="container"></param>
public override void Configure(Container container)
{
this.AddPlugin(new CorsFeature());
}
這樣就可以了，相當於使用默認的CORS配置：
CorsFeature(allowedOrigins:"*",
allowedMethods:"GET, POST, PUT, DELETE, OPTIONS",
allowedHeaders:"Content-Type",
allowCredentials:false);
如果僅僅允許GET和POST的請求支持CORS，則只需要改為：
Plugins.Add(new CorsFeature(allowedMethods: "GET, POST"));
當然也可以在AppHost的Config裡面設置全局的CORS，如下：
/// <summary>
/// Application specific configuration
/// This method should initialize any IoC resources utilized by your web service classes.
/// </summary>
/// <param name="container"></param>
public override void Configure(Container container)
{
base.SetConfig(new EndpointHostConfig
{
GlobalResponseHeaders = {
{ "Access-Control-Allow-Origin", "*" },
{ "Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS" },
{ "Access-Control-Allow-Headers", "Content-Type" },
},
});
}
現在運行WebService，使用postman或者Chrome調用這個請求，可以看到返回的值頭文件中，已經加上了響應頭，並且可以正常顯示返回結果了：
CORS使用起來簡單，不需要客戶端的額外處理，而且支持Post的方式提交請求，但是CORS的唯一一個缺點是對客戶端的瀏覽器版本有要求，支持CORS的瀏覽器機器版本如下：
總結
本文介紹了JavaScript中的跨域基本概念和產生的原因，以及如何解決跨域的兩種方法，一種是JSONP 一種是 CORS,在客戶端Javascript調用服務端介面的時候，如果需要支持跨域的話，需要服務端支持。JSONP的方式就是服務端對返回的值進行回調函數包裝，他的優點是支持眾多的瀏覽器， 缺點是僅支持Get的方式對服務端請求。另一種主流的跨域方案是CORS，他僅需要服務端在返回數據的時候在相應頭中加入標識信息。這種方式非常簡便。唯一的缺點是需要瀏覽器的支持，一些較老的瀏覽器可能不支持CORS特性。
跨域支持是創建WebService時應該考慮的一個功能點，希望本文對您在這邊面有所幫助，文中是使用ServiceStack來演示跨域支持的，如果您用的WCF的話，知道跨域原理的前提下，實現跨域應該不難。
參考資料：
https://github.com/ServiceStack/ServiceStack/wiki/Customize-HTTP-Responses
https://github.com/ServiceStack/ServiceStack/wiki/Request-and-response-filters
http://stackoverflow.com/questions/8211930/servicestack-rest-api-and-cors
http://stackoverflow.com/questions/15224038/rename-callback-parameter-for-jsonp
『貳』 用webuploader怎麼解決跨域上傳文件的問題
跨域請求前瀏覽器會自動發出一個options請求，如果伺服器的響應頭部中有如下信息：
Access-Control-Allow-Origin: #允許訪問的源，如http://localhost:3000
Access-Control-Allow-Methods: #允許的方法，如get, post
瀏覽器收到這個響應就會繼續原來的請求，否則就會終止。
在webuploader中可以在uploadBeforeSend的回調中設置請求的頭部，例如
uploader.on('uploadBeforeSend', function(obj, data, headers) {
_.extend(headers, {
"Origin": "http://localhost:3000",
"Access-Control-Request-Method": "POST"
});
});
在服務端的post響應中增加頭部：Access-Control-Allow-Origin: http://localhost:3000
『叄』 跨域怎麼解決
1）訪問原來無法訪問的資源，如google
（2） 可以做緩存，加速訪問資源
（3）對客戶端訪問授權，上網進行認證
（4）代理可以記錄用戶訪問記錄（上網行為管理），對外隱藏用戶信息 客戶端是無感知代理的存在的，反向代理對外都是透明的，訪問者者並不知道自己訪問的是一個代理。因為客戶端不需要任何配置就可以訪問。
（1）保證內網的安全，可以使用反向代理提供WAF功能，阻止web攻擊 大型網站，通常將反向代理作為公網訪問地址，Web服務
『肆』 前端跨域問題有哪些常用的解決方式
強烈推薦JSONP。
Jsonp(JSON with Padding) 是 json 的一種"使用模式"，可以讓網頁從別的域名（網站）那獲取資料，即跨域讀取數據。
http://www.cnblogs.com/yuzhongwusan/archive/2012/12/11/2812849.html
http://www.runoob.com/json/json-jsonp.html
http://justcoding.iteye.com/blog/1366102/
『伍』 跨域是指什麼,因為什麼引起的有哪些解決方案web前端知識
廣義跨域就是指跨域訪問，簡單來說就是 A 網站的 javascript 代碼試圖訪問 B 網站，包括提交內容和獲取內容。由於安全原因，跨域訪問是被各大瀏覽器所默認禁止的。
當一個域與其他域建立了信任關系後，2個域之間不但可以按需要相互進行管理，還可以跨網分配文件和列印機等設備資源，使不同的域之間實現網路資源的共享與管理。這就形成了「跨域」。
『陸』 訪問本地頁面 怎麼解決瀏覽器跨域問題
前幾天，工作上有一新需求，需要前端web頁面非同步調用後台的Webservice方法返回信息。實現方法有多種，本例採用jQuery+Ajax，完成後，在本地調試了一切ok，但是部署到伺服器上以後就出現問題了，後台服務調用沒有響應，怎麼回事？代碼沒怎麼改動，唯一修改的地方就是jQuery的ajax方法中的url地址。難道是這里的問題，經過檢查和調試，發現原來是同源策略在作怪，我們知道，JavaScript或jQuery是在Web前端開發中經常使用的動態腳本技術。在JavaScript中，有一個很重要的安全性限制，被稱為「Same- Origin Policy」（同源策略）。這一策略對於JavaScript代碼能夠訪問的頁面內容做了很重要的限制，即JavaScript只能訪問與包含它的文檔或腳本 在同一域名下的內容。不同域名下的腳本不能互相訪問，即便是子域也不行。 但是有時候又不可避免地需要進行跨域操作，這時候「同源策略」就是一個限制了，怎麼辦呢？採用JSONP跨域GET請求是一個常用的解決方案，下面我們來看一下JSONP跨域是如何實現的，並探討下JSONP跨域的原理。 這里提到了JSONP，那有人就問了，它同JSON有什麼區別不同和區別呢，接下我們就來看看，網路有以下說明： JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。它基於JavaScript（Standard ECMA-262 3rd Edition - December 1999）的一個子集。 JSON採用完全獨立於語言的文本格式，但是也使用了類似於C語言家族的習慣（包括C, C++, C#, Java, JavaScript, Perl, Python等）。這些特性使JSON成為理想的數據交換語言。易於人閱讀和編寫，同時也易於機器解析和生成(網路傳輸速度快)。 JSONP(JSON with Padding)是JSON的 一種「使用模式」，可用於解決主流瀏覽器的跨域數據訪問的問題。由於同源策略，一般來說位於 server1 的網頁無法與不是 server1的伺服器溝通，而 HTML 的<script> 元素是一個例外。利用 <script> 元素的這個開放策略，網頁可以得到從其他來源動態產生的 JSON 資料，而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料並不是 JSON，而是任意的JavaScript，用 JavaScript 直譯器執行而不是用 JSON 解析器解析。 到這里，應該明白了，JSON是一種輕量級的數據交換格式，像xml一樣，是用來描述數據間的。JSONP是一種使用JSON數據的方式，返回的不是JSON對象，是包含JSON對象的javaScript腳本。 那JSONP是如何工作的呢，我們知道，由於同源策略的限制，XmlHttpRequest只允許請求當前源（域名、協議、埠）的資源。若要跨域請求出於安全性考慮是不行的，但是我們發現，Web頁面上調用js文件時則不受是否跨域的影響，而且擁有」src」這個屬性的標簽都擁有跨域的能力，比如<script>、<img>、<iframe>，這時候，聰明的程序猿就想到了變通的方法，如果要進行跨域請求， 通過使用html的script標記來進行跨域請求，並在響應中返回要執行的script代碼，其中可以直接使用JSON傳遞 javascript對象。即在跨域的服務端生成JSON數據，然後包裝成script腳本回傳，這不就突破同源策略的限制，解決了跨域訪問的問題了么。 下面我們就看下怎麼實現： 前端代碼： function CallWebServiceByJsonp() { $("#SubEquipmentDetails").html(''); $.ajax({ type: "GET", cache: false, url: "servername/webservice/webservice.asmx/GetSingleInfo", data: { strCparent: $("#Equipment_ID").val() }, dataType: "jsonp", //jsonp: "callback", jsonpCallback: "OnGetMemberSuccessByjsonp" }); } function OnGetMemberSuccessByjsonp(data) { //處理data alert(data); } 後端的WebService代碼： [WebMethod] [ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true)] public void GetSingleInfo(string strCparent) { string ret = string.Empty; HttpContext.Current.Response.ContentType = "application/json;charset=utf-8"; string jsonCallBackFunName = HttpContext.Current.Request.Params["callback"].ToString(); //string jsonCallBackFunName1 = HttpContext.Current.Request.QueryString["callback"].Trim(); //上面代碼必須 //中間代碼執行自己的業務操作，可返回自己的任意信息（多數據類型） BLL.equipment eq_bll = new BLL.equipment(); List<Model.equipment> equipmentList = new List<Model.equipment>(); equipmentList = eq_bll.GetModelEquimentList(strCparent); ret = JsonConvert.SerializeObject(equipmentList); //下面代碼必須 HttpContext.Current.Response.Write(string.Format("{0}({1})", jsonCallBackFunName, ret)); HttpContext.Current.Response.End(); } 如上所示，前端的CallWebServiceByJsonp方法採用jQuery的ajax方法調用後端的Web服務GetSingleInfo方法，後台的GetSingleInfo方法，使用前端的回調方法OnGetMemberSuccessByjsonp包裝後台的業務操作的JSON對象，返回給前端一段javascript片段執行。巧妙的解決了跨域訪問問題。 JSONP的缺點： JSONP不提供錯誤處理。如果動態插入的代碼正常運行，你可以得到返回，但是如果失敗了，那麼什麼都不會發生。 以上內容簡單給大家介紹了JSONP解決Ajax跨域訪問問題的思路，希望能夠幫助到大家，如果大家有疑問歡迎給我留言，小編會及時回復大家的，在此也非常感謝大家對腳本之家網站的支持！
『柒』 怎麼解決伺服器間的跨域問題
1、服務端的解決方案的基本原理就是，由客戶端將請求發給本域伺服器，再由本域伺服器的代理來請求數據並將響應返回給客戶端。
2、最常用的伺服器解決方案就是利用web伺服器本身提供的proxy功能，如apache和lighttpd的mod_proxy模塊。在網路內 部，transmit的分流功能也可以解決部分跨域問題。但這些方法都有一定的局限性，鑒於安全性等問題的考慮，space這邊最後開發了一個專門用於處理跨域請求代理服務的spproxy模塊，用於徹底解決js跨域問題。
3、下面將以空間的開放平台為例，簡單介紹下如何通過apache的mod_proxy、transmit的分流以及space的spproxy模塊來解
決該跨域問題，並簡單介紹下spproxy的一些特性、缺點及下一步的改進計劃。
空間在展現每個UWA開放模塊之前都必須請求該模塊的xml源代碼以進行解析，每個模塊的源代碼文件都是存放在act域下的/ow/uwa目錄下，那麼在
4、用戶空間首頁（hi域）中請求該xml文件時就會存在js跨域問題。要解決該問題，只能讓js向hi域的web伺服器請求xml文件，而hi域web服務
器則通過一定的代理機制（如mod_proxy、transmit分流、spproxy）向act域的web伺服器請求文件
『捌』 前端解決跨域都有哪些方法
什麼是跨域？
瀏覽器發送的請求地址（URL）與所在頁面的地址 不同（埠/協議/域名 其一不同）。簡言之，瀏覽器發出的請求url，與其所在頁面的url不一樣。此時，同源策略會讓瀏覽器拒收 伺服器響應回來的數據，報錯信息如下：
最常用的四種跨域解決方案
1.cors
cors跨域資源共享允許是在服務端"Access-Control-Allow-Origin"欄位設置的，當將cors設置為允許某個地址訪問時，該地址就可以跨域訪問這個伺服器地址。當cors設置為"*"時即允許所有地址訪問時，則表示所有地址都可以跨域訪問這個伺服器地址的資源。
2、 通過jsonp跨域
Jsonp是Json的一種「使用模式」，他就可以解決瀏覽器遇到的跨域問題，我們可以動態創建script，再請求一個帶參網址實現跨域通信。用Jsonp請求得到的是JavaScript，相當於直接用JavaScript解析。
3、postMessage跨域
在h5中新增了postMessage方法，postMessage可以實現跨文檔消息傳輸，我們可以通過Windows的message事件來監聽發送跨文檔消息傳輸內容。
4、proxy（代理）
原理：因為同源策略只是針對瀏覽器的安全策略，但是服務端並不受同源策略的限制，也就不存在跨域的問題。
與web解決跨域的三種方法相關的資料
- 瀉速停顆粒的解決方法
- 充電口解決方法
- 黃鶴樓煙鑒別方法軟包
- 內雙變雙眼皮最簡單的方法
- 方法的造句一年級超簡單
- 各種木頭傢具的鑒別方法
- 紙巾生根最簡單方法
- 吡蟲啉檢測方法
- ph的檢測方法主要有
- 唱歌壓喉有什麼解決方法
- 國標鋁的檢測方法
- 尿素水溶液的檢測方法
- 廢氣氮氧化物檢測方法
- 常見的硬體故障和解決方法
- 做辣條子最簡單方法
- 吃酸東西牙酸怎麼解決方法
- 大清銅元鑒別方法
- 控制器轉把檢測方法
- 養菌棚兩側滲水解決方法
- 二次海鮮過敏最簡單的治療方法
- 葡萄酒簡單釀造方法視頻
- 怎樣簡單瘦小腿的方法
- 足球硬度檢測方法
- 摩托車檢測有幾種方法
- 自己家做月餅的簡單方法
- 骨盆前傾矯正最好最簡單的方法
- 熱氣解決最好方法
- 餃子的包法簡單又快的方法
- 平面偏振光的檢測方法
- PP檢測方法
- 鑒別偽幣最簡單方法
- 戰國紅瑪瑙鑒別方法
- 圓柱螺紋檢測方法
- 最簡單的方法處理新鍋
- 做花最最最簡單的方法是啥
- 陰轉多雲最好的解決方法
- 出現高反怎麼解決方法
- 哪種血型檢測方法最准確
- CYP酶探針底物檢測方法
- 內切眼袋怎麼消除簡單方法
- 解決期末焦慮的方法
- 小孩感覺頭痛簡單解決方法