❶ 訪問本地頁面 怎麼解決瀏覽器跨域問題
前幾天，工作上有一新需求，需要前端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跨域訪問問題的思路，希望能夠幫助到大家，如果大家有疑問歡迎給我留言，小編會及時回復大家的，在此也非常感謝大家對腳本之家網站的支持！
❷ JavaScript跨域總結與解決辦法 什麼是跨域
JavaScript出於安全方面的考慮，不允許跨域調用其他頁面的對象。但在安全限制的同時也給注入iframe或是ajax應用上帶來了不少麻煩。這里把涉及到跨域的一些問題簡單地整理一下：
首先什麼是跨域，簡單地理解就是因為JavaScript同源策略的限制，a.com 域名下的js無法操作b.com或是c.a.com域名下的對象。
特別注意兩點：
第一，如果是協議和埠造成的跨域問題「前台」是無能為力的，
第二：在跨域問題上，域僅僅是通過「URL的首部」來識別而不會去嘗試判斷相同的ip地址對應著兩個域或兩個域是否在同一個ip上。
「URL的首部」指window.location.protocol +window.location.host，也可以理解為「Domains, protocols and ports must match」。- document.domain = 'a.com';
- var ifr = document.createElement('iframe');
- ifr.src = 'http://script.a.com/b.html';
- ifr.style.display = 'none';
- document.body.appendChild(ifr);
- ifr.onload = function(){
- var doc = ifr.contentDocument || ifr.contentWindow.document;
- // 在這里操縱b.html
- alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue);
- };
- document.domain = 'a.com';
問題：
1、安全性，當一個站點（b.a.com）被攻擊後，另一個站點（c.a.com）會引起安全漏洞。
2、如果一個頁面中引入多個iframe，要想能夠操作所有iframe，必須都得設置相同domain。
- js.onload = js.onreadystatechange = function() {
- if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') {
- // callback在此處執行
- js.onload = js.onreadystatechange = null;
- }
- };
- function startRequest(){
- var ifr = document.createElement('iframe');
- ifr.style.display = 'none';
- ifr.src = 'http://www.cnblogs.com/lab/cscript/cs2.html#paramdo';
- document.body.appendChild(ifr);
- }
- function checkHash() {
- try {
- var data = location.hash ? location.hash.substring(1) : '';
- if (console.log) {
- console.log('Now the data is '+data);
- }
- } catch(e) {};
- }
- setInterval(checkHash, 2000);
- //模擬一個簡單的參數處理操作
- switch(location.hash){
- case '#paramdo':
- callBack();
- break;
- case '#paramset':
- //do something……
- break;
- }
- function callBack(){
- try {
- parent.location.hash = 'somedata';
- } catch (e) {
- // ie、chrome的安全機制無法修改parent.location.hash，
- // 所以要利用一個中間的cnblogs域下的代理iframe
- var ifrproxy = document.createElement('iframe');
- ifrproxy.style.display = 'none';
- ifrproxy.src = 'http://a.com/test/cscript/cs3.html#somedata'; // 注意該文件在"a.com"域下
- document.body.appendChild(ifrproxy);
- }
- }
- //因為parent.parent和自身屬於同一個域，所以可以改變其location.hash的值
- parent.parent.location.hash = self.location.hash.substring(1);
otherWindow.postMessage(message, targetOrigin);
otherWindow:對接收信息頁面的window的引用。可以是頁面中iframe的contentWindow屬性；window.open的返回值；通過name或下標從window.frames取到的值。
message:所要發送的數據，string類型。
targetOrigin:用於限制otherWindow，「*」表示不作限制- <iframe id="ifr" src="b.com/index.html"></iframe>
- <script type="text/javascript">
- window.onload = function() {
- var ifr = document.getElementById('ifr');
- var targetOrigin = 'http://b.com'; // 若寫成'http://b.com/c/proxy.html'效果一樣 // 若寫成'http://c.com'就不會執行postMessage了
- ifr.contentWindow.postMessage('I was there!', targetOrigin);
- };
- </script>
- <script type="text/javascript">
- window.addEventListener('message', function(event){
- // 通過origin屬性判斷消息來源地址
- if (event.origin == 'http://a.com') {
- alert(event.data); // 彈出"I was there!"
- alert(event.source); // 對a.com、index.html中window對象的引用
- // 但由於同源策略，這里event.source不可以訪問window對象
- }
- }, false);
- </script>
接下來簡單地總結一下在「前台」一般處理跨域的辦法，後台proxy這種方案牽涉到後台配置，這里就不闡述了，有興趣的可以看看yahoo的這篇文章：《JavaScript: Use a Web Proxy for Cross-Domain XMLHttpRequest Calls》
1、document.domain+iframe的設置
對於主域相同而子域不同的例子，可以通過設置document.domain的辦法來解決。具體的做法是可以在http://www.a.com/a.html和http://script.a.com/b.html兩個文件中分別加上document.domain = 『a.com』；然後通過a.html文件中創建一個iframe，去控制iframe的contentDocument，這樣兩個js文件之間就可以「交互」了。當然這種辦法只能解決主域相同而二級域名不同的情況，如果你異想天開的把script.a.com的domian設為alibaba.com那顯然是會報錯地！代碼如下：
www.a.com上的a.html
script.a.com上的b.html
這種方式適用於{www.kuqin.com, kuqin.com, script.kuqin.com, css.kuqin.com}中的任何頁面相互通信。
備註：某一頁面的domain默認等於window.location.hostname。主域名是不帶www的域名，例如a.com，主域名前面帶前綴的通常都為二級域名或多級域名，例如www.a.com其實是二級域名。 domain只能設置為主域名，不可以在b.a.com中將domain設置為c.a.com。
2、動態創建script
雖然瀏覽器默認禁止了跨域訪問，但並不禁止在頁面中引用其他域的JS文件，並可以自由執行引入的JS文件中的function（包括操作cookie、Dom等等）。根據這一點，可以方便地通過創建script節點的方法來實現完全跨域的通信。具體的做法可以參考YUI的Get Utility
這里判斷script節點載入完畢還是蠻有意思的：ie只能通過script的readystatechange屬性，其它瀏覽器是script的load事件。以下是部分判斷script載入完畢的方法。
3、利用iframe和location.hash
這個辦法比較繞，但是可以解決完全跨域情況下的腳步置換問題。原理是利用location.hash來進行傳值。在url： http://a.com#helloword中的『#helloworld』就是location.hash，改變hash並不會導致頁面刷新，所以可以利用hash值來進行數據傳遞，當然數據容量是有限的。假設域名a.com下的文件cs1.html要和cnblogs.com域名下的cs2.html傳遞信息，cs1.html首先創建自動創建一個隱藏的iframe，iframe的src指向cnblogs.com域名下的cs2.html頁面，這時的hash值可以做參數傳遞用。cs2.html響應請求後再將通過修改cs1.html的hash值來傳遞數據（由於兩個頁面不在同一個域下IE、Chrome不允許修改parent.location.hash的值，所以要藉助於a.com域名下的一個代理iframe；Firefox可以修改）。同時在cs1.html上加一個定時器，隔一段時間來判斷location.hash的值有沒有變化，一點有變化則獲取獲取hash值。代碼如下：
先是a.com下的文件cs1.html文件：
cnblogs.com域名下的cs2.html:
a.com下的域名cs3.html
當然這樣做也存在很多缺點，諸如數據直接暴露在了url中，數據容量和類型都有限等……
4、window.name實現的跨域數據傳輸
文章較長列在此處不便於閱讀，詳細請看window.name實現的跨域數據傳輸。
5、使用HTML5 postMessage
HTML5中最酷的新功能之一就是跨文檔消息傳輸Cross Document Messaging。下一代瀏覽器都將支持這個功能：Chrome 2.0+、Internet Explorer 8.0+, Firefox 3.0+, Opera 9.6+, 和 Safari 4.0+ 。 Facebook已經使用了這個功能，用postMessage支持基於web的實時消息傳遞。
a.com/index.html中的代碼：
b.com/index.html中的代碼：
參考文章：《精通HTML5編程》第五章——跨文檔消息機制、https://developer.mozilla.org/en/dom/window.postmessage
6、利用flash
這是從YUI3的IO組件中看到的辦法，具體可見http://developer.yahoo.com/yui/3/io/。
可以看在Adobe Developer Connection看到更多的跨域代理文件規范：ross-Domain Policy File Specifications、HTTP Headers Blacklist。
❸ 前端解決跨域都有哪些方法
什麼是跨域？
瀏覽器發送的請求地址（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（代理）
原理：因為同源策略只是針對瀏覽器的安全策略，但是服務端並不受同源策略的限制，也就不存在跨域的問題。
❹ 前端跨域如何解決
什麼是跨域？
跨域是通俗的說是從一個域名去請求另一個域名的資源。比如從 www..com 頁面去請求 www.taobao.com 的資源。
跨域嚴格一點來說：兩個域名只要協議，域名，埠中只要有一個不同，就被成為跨域
瀏覽器為什麼要限制跨域？
只有同域才可以拿到存在cookie中的信息，防止壞人隨意拿到我們的信息去做壞事
在團隊的配置中，我們為了減少前端對後端的依賴，提高開發效率，使前後端職責更清晰等等因素，我們不得不面對跨域的問題，那我們該怎麼解決呢？
1、 JSONP
原理：瀏覽器對script的資源引用沒有同源限制，同時資源載入到頁面後會立即執行，所以通過動態插入script標簽即可達到跨域的請求
特點：數據為json格式
缺點：不能post
2、 CORS
原理 ： cors(Cross-Origin Resource Sharing)是 W3C CORS 工作草案 ，它定義了在跨域訪問資源時瀏覽器和伺服器之間如何通信。CORS背後的基本思想是使用自定義的HTTP頭部允許瀏覽器和伺服器相互了解對方，從而決定請求或響應成功與否
特點 ：是 JSONP 模式的現代版。支持更多的請求方式，XMLHttpRequest
缺點：需後端配合修改，現代瀏覽器支持cors，老瀏覽器依舊要用JSONP
3、 PROXY
原理：proxy代理用於將請求攔截，然後通過伺服器來發送請求，然後再將請求的結果傳遞給前端
node通常用 node-http-proxy 即可
proxy太通用了，weblack-dev-server里已集成，使用時直接配置即可 webpack-dev-server proxy代理
❺ 如何解決IE瀏覽器跨域問題
工具：
IE瀏覽器
方法如下：
1、打開IE瀏覽器，在工具菜單下選擇Internet選項，打開Internet選項卡
2、切換到安全選項卡下，點擊可信站點，然後單擊站點按鈕
3、可信站點窗口輸入網址到可信站點的區域，點擊添加按鈕，網址則會添加到網站列表下，最後關閉可信站點窗口
4、還是在安全選項卡下的可信站點，點擊自定義級別
5、打開站點區域窗口，找到跨域瀏覽窗口和框架選擇啟用
6、在當前窗口中繼續往下翻，通過域訪問數據源也選擇啟用，點擊確定關閉受信任的站點區域窗口
7、在Internet窗口也點擊確定按鈕，同時關閉瀏覽器
8、在請求的js腳本中添加是否允許跨域訪問的許可權，jQuery.support.cors默認值為true，則代表允許；反之，不允許。設置完成，重新打開瀏覽器驗證即可。
❻ 跨域問題解決方法
跨域？他是瀏覽器的 同源策略 造成的，是瀏覽器對javascript施加的安全限制。所謂同源是指：域名、協議、埠均相同。
解決
原理：利用標簽具有可跨域的特性，可實現跨域訪問介面，需要後端的支持。
伺服器在收到請求後，解析參數，計算返還數據，輸出messagetow（data）字元串。
缺點：只能發送get請求，無法訪問伺服器的響應文本（單向請求），即只能獲取數據不能改數據。
通過ajax請求不同域的實現，底層不是靠XmlHttpRequest而是script，所以不要被這個方法給迷惑了。
在ajax請求中類型如果是type是get post，其實內部都只會用get，因為其跨域的原理就是用的動態載入script的src，所以我們只能把參數通過url的方式傳遞
其實jquery內部會轉化成
http://192.168.31.137/train/test/jsonpthree?callback=messagetow
然後動態載入http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron">
http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron"><script type="text/javascript" src=" http://192.168.31.137/train/test/jsonpthree?callback=messagetow "></script>
http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron">
http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron">
Cross-Origin Resource Sharing（CORS）跨域資源共享是一份瀏覽器技術的規范，提供了 Web 服務從不同域傳來沙盒腳本的方法，以避開瀏覽器的同源策略，確保安全的跨域數據傳輸。現代瀏覽器使用CORS在API容器如XMLHttpRequest來減少HTTP請求的風險來源。與 JSONP 不同，CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。伺服器一般需要增加如下響應頭的一種或幾種：
跨域請求默認不會攜帶Cookie信息，如果需要攜帶，請配置下述參數：
window.name通過在iframe（一般動態創建i）中載入跨域HTML文件來起作用。然後，HTML文件將傳遞給請求者的字元串內容賦值給window.name。然後，請求者可以檢索window.name值作為響應。
iframe標簽的跨域能力；
window.name屬性值在文檔刷新後依舊存在的能力（且最大允許2M左右）。
每個iframe都有包裹它的window，而這個window是top window的子窗口。 contentWindow 屬性返回<iframe>元素的Window對象。你可以使用這個Window對象來訪問iframe的文檔及其內部DOM。
HTML5新特性，可以用來向其他所有的 window 對象發送消息。需要注意的是我們必須要保證所有的腳本執行完才發送 MessageEvent，如果在函數執行的過程中調用了它，就會讓後面的函數超時無法執行。
前提條件：這兩個域名必須屬於同一個基礎域名!而且所用的協議，埠都要一致，否則無法利用document.domain進行跨域，所以只能跨子域
在 根域 范圍內，允許把domain屬性的值設置為它的上一級域。例如，在」aaa.xxx.com」域內，可以把domain設置為 「xxx.com」 但不能設置為 「xxx.org」 或者」com」。
現在存在兩個域名aaa.xxx.com和bbb.xxx.com。在aaa下嵌入bbb的頁面，由於其document.name不一致，無法在aaa下操作bbb的js。可以在aaa和bbb下通過js將document.name = 'xxx.com';設置一致，來達到互相訪問的作用。
WebSocket protocol 是HTML5一種新的協議。它實現了瀏覽器與伺服器全雙工通信，同時允許跨域通訊，是server push技術的一種很棒的實現。相關文章，請查看： WebSocket 、 WebSocket-SockJS
**需要注意：**WebSocket對象不支持DOM 2級事件偵聽器，必須使用DOM 0級語法分別定義各個事件。
同源策略是針對瀏覽器端進行的限制，可以通過伺服器端來解決該問題,例如nginx
DomainA客戶端（瀏覽器） ==> DomainA伺服器 ==> DomainB伺服器 ==> DomainA客戶端（瀏覽器）
❼ 跨域是指什麼,因為什麼引起的有哪些解決方案web前端知識
廣義跨域就是指跨域訪問，簡單來說就是 A 網站的 javascript 代碼試圖訪問 B 網站，包括提交內容和獲取內容。由於安全原因，跨域訪問是被各大瀏覽器所默認禁止的。
當一個域與其他域建立了信任關系後，2個域之間不但可以按需要相互進行管理，還可以跨網分配文件和列印機等設備資源，使不同的域之間實現網路資源的共享與管理。這就形成了「跨域」。
❽ 什麼是跨域訪問
JS本身不允許跨域訪問，需要通過跨域處理才行，但是谷歌瀏覽器有一項允許跨域功能可以開啟。方法如下：
1.選擇谷歌瀏覽器，右鍵--屬性。
❾ AJAX跨域訪問解決方法
IE9、Chrome、FF、Opera支持ResponseHeader Access-Control-Allow-Origin
IE下得額外配置：
jQuery.support.cors = true; （啟用讀取上面那個頭信息的功能）
點擊IE瀏覽器的的「工具->Internet 選項->安全->自定義級別」將「其他」選項中的「通過域訪問數據源」選中為「啟用」或者「提示」，點擊確定就可以了。（自身的過濾）