導航:首頁 > 解決方法 > 前端解決跨域的方法

前端解決跨域的方法

 發布時間：2022-01-11 12:22:45

『壹』 解決前端和後端分離後，如何跨域調用

1、第一種方式：

jsonp的，這種方式只支持get，不支持post請求方式

2、第二種方式：

可以配置攔截器，在攔截器中設置消息頭

3、第三方式：

cors方式：這種方式配置首先需要下載cors-filter-2.5.jar和java-property-utils1.10.jar導入到項目中，然後在web.xml重配置。

『貳』 前端跨域問題有哪些常用的解決方式

強烈推薦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/

『叄』 前端工程師網站跨域問題怎麼解決

1）.margin-top,margin-bottom不能正常顯示時
一.有時會遇到外層中的子層使用margin-top不管用的情況；這里我們需要在子層的前後加上一個
div{height:0;overflow:hidden;}
例
CSS樣式表中：
#box {background-color:#eee;}
#box p {margin-top: 20px;margin-bottom: 20px;text-align:center;}
解決方法：在P標簽前後各加2個空的div：<divstyle="height:0;overflow:hidden"></div>
二.網頁中頭部，中部，底部的居底部有時給個margin-bottom:10px;不管用也是要給個清除屬性的.clear{clear:both;font-size:0;line-height:0;}在底部<div id="footer"></div>下加個<div></div>
2）.div層中高度自適應問題
網頁前端科技人員在設計網頁時不可能知道客戶在要他們自己的網站內容頁里加多少文字或圖片內容
這時我們就不能規定div層的高度，為此應寫成min-height:200px;height:auto!important;height:
200px;overflow:visible;這樣ie7,ff,ie6瀏覽器的高度自適應問題就解決了，這些在
網站中用到最多了。
3）.div層中子層的居底部對齊問題
div中的定位問題有很多也很麻煩，但弄懂了就OK了，在一個大的div層中如何讓子層的內容居底部
對齊就涉及到了position定位問題；
例
div層#box{position:relative;border:1px solidred;width:600px;hegiht:400px;}
div子層#box .wrap{position:absolute;bottom:0;border:1px dashedblue;width:200px;height:
100px},最近寫的網站中就用到了
4）.div層中清除clear屬性的一小部分應用
在div中一個大的層裡面有很多子層，若是加上邊框在ie7、ie6中或許會正常顯示，但是在ff中可能
只會成一條線了，此時在最外層的後面加上<div style="clear:both"></div>或者設 .wrapfix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}後在每個浮動外框調用wrapfix；學生書網里用到最多了。
5）.解決IE8下div移位、錯位等兼容性問題
在<head>標簽後面的第一句話加上<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />就OK了
6）.單行文字居中與字體樣式問題
在div中一個層中只有一行文字，要讓這層中的文字居中，可設line-height的高度和層的高度一樣，注意這一層中的文字不能換行，此外，設了line-height時再給定字體樣式font:bold 14px "宋體";這時要把font:bold 14px "宋體";放在line-height的前面，否則字體樣式不顯示文字也不居中；或者將font:bold 14px "宋體";改成font-size:16px;font-weight:bold;font-family:"宋體";就OK了。
7）.滑鼠滑上去的特殊效果
往往為了達到顯眼的效果，我們會寫到一些好看的效果，方法一在樣式表中寫：ul li a{border:1px solid red;}ul li a:hoverimg{filter:alpha(opacity=40在ul標簽中調用即可方法二：在樣式表中寫上：.hover img{filter:alpha(opacity=40);}在div中調用onmouseover="this.className='hover'"onmouseout="this.className=this.classtype"即可
8）.IE6中高度不對問題
今天在div中給定了高度為1px,其它瀏覽器顯示正常，可是ie6中顯示的高度就不對了，這時我給樣式表中加了個font-size:0px;line-height:0px;就好了
9）.ul在外框里margin-top不起作用的問題
在div大框子里用了ul作導航的時候為了合ul層居中顯示，設ul的樣式表為margin-top:-15px不起作用了，此時應該將div大框設定高度後給個line-height與height一樣的高度，ul層就自動居中了。
例如
10）.ff中margin-top有時不起作用的問題
今天頭暈腦漲的把這問題給解決了，這幾天寫標網都有累似問題，可是一直都是換個寫法解決的，今天的這個辦法也不只可行試試還是可以的，在一個div外框層中給個寬度例如，#div_wrap{width:280px;height:100%;}
其次在這個框子里設一個.div_top{widh:100%;font:bold12px "宋體";height:24px;line-height:24px;}
.div_center{border:1px solid#dbdbdb;border-top:none;background:#fff;min-height:460px !important;height:auto!important;height:460px;overflow:visible;}
最後在這個div_center里套個ul li時經常會在ff中出問題，也就是在div_top與div_center中莫名的多了幾個像素的空格，這時給ul樣式表設個display:inline-table即可；
11）.list-style-image的用法
div中經常用到新聞列表前面有圖標的樣式，有兩種簡單的方法
一.可以寫成ul.menu{width:100%;} ul.menuli{background:url(em_img/small_icon.jpg) 5px center no-repeat;list-style-position:inside;padding-left:18px;}即可在各瀏覽器正常顯示
二. 可以設ul.menu{width:80%;} ul.menuli{list-style-image:url(em_img/small_icon.jpg); }
此時新聞列表前的小圖標即可在ie6，ie7，ie8,ff中都正常顯示但，ie6需要不斷的刷新才能正常顯示小圖標；

12）.
IE6 li:hover兼容問題
<scripttype="text/javascript"><!--//--><![CDATA[//><!--
sfHover =function() {
var sfEls = document.getElementById("nav").getElementsByTagName_r("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!］>
</script>
13）.ie6下支持position:absolute;
最近寫一個簡訊平台的頁面用到的底部固定的層，在ff和ie7,ie8下都是好的，可到ie6下就不行了，轉了整個地球終於出來了：
background-attachment:fixed; }
#bottomNav {background-color:#096; z-index:999; position:fixed; bottom:0; left:0;width:100%; _position:absolute;
_top: expression_r(documentElement.scrollTop+ documentElement.clientHeight-this.offsetHeight); overflow:visible; }
樣式表中調用即可！詳細請見「高度自適應屏幕尺寸！」
14）.border:none;與border:0;的區別
1.性能差異
【border:0;】把border設為「0」像素雖然在頁面上看不見，但按border默認值理解，瀏覽器依然對border-width/border-color進行了渲染，即已經佔用了內存值。
【border:none;】把border設為「none」即沒有，瀏覽器解析「none」時將不作出渲染動作，即不會消耗內存值。
2.兼容性差異
兼容性差異只針對瀏覽器IE6、IE7與標簽button、input而言，在win、win7、vista 的XP主題下均會出現此情況。
【border:none;】當border為「none」時似乎對IE6/7無效邊框依然存在
【border:0;】當border為「0」時，感覺比「none」更有效，所有瀏覽器都一致把邊框隱藏
總結：
1. 對比border:0;與border:none;之間的區別在於有渲染和沒渲染，感覺他們和display:none;與visibility:hidden;的關系類似，而對於border屬性的渲染性能對比暫時沒找測試的方法，雖然認為他們存在渲染性能上的差異但也只能說是理論上。
2. 如何讓border:none;實現全兼容？只需要在同一選擇符上添加背景屬性即可
對於border:0;與border:none;個人更向於使用,border:none;，因為border:none;畢竟在性能消耗沒有爭議，而且兼容性可用背景屬性解決不足以成為障礙。
15）.ie下。png的圖片不會有灰色背景出現
註：首推PNG8，即使在IE6中它的透明背景也能被正確顯示。PNG8使用的技巧是，輸出時把「雜邊」設置為和背景接近的顏色
1.幾經周折終於把ie6下.png有色圖問題解決了，原來IE6.0原本支持png8的索引色透明度，但不支持png或8位以上的alpha 透明度，在IE6.0下，非PNG8格式的透明圖片部分，會顯示為淡淡的灰綠色。在網頁中頭部加個代碼<!--[if IE 6]>
<script type="text/javascript" src=""></script>
<script src="js/DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('.png_bg');
</script>
<![endif]-->即可！

『肆』 前端跨域方式有哪些

處理跨域方法一——JSONP
1.JSONP原理
利用script元素的這個開放策略，網頁可以得到從其他來源動態產生的 JSON 數據。JSONP請求一定需要對方的伺服器做支持才可以。
2.JSONP和AJAX對比
JSONP和AJAX相同，都是客戶端向伺服器端發送請求，從伺服器端獲取數據的方式。但AJAX屬於同源策略，JSONP屬於非同源策略（跨域請求）
3.JSONP優缺點
JSONP優點是兼容性好，可用於解決主流瀏覽器的跨域數據訪問的問題。缺點是僅支持get方法具有局限性。
4.JSONP的流程(以第三方API地址為例，不必考慮後台程序)
聲明一個回調函數，其函數名(如fn)當做參數值，要傳遞給跨域請求數據的伺服器，函數形參為要獲取目標數據(伺服器返回的data)。
創建一個
伺服器接收到請求後，需要進行特殊的處理：把傳遞進來的函數名和它需要給你的數據拼接成一個字元串,例如：傳遞進去的函數名是fn，它准備好的數據是fn([{「name」:「jianshu」}]）。
最後伺服器把准備的數據通過HTTP協議返回給客戶端，客戶端再調用執行之前聲明的回調函數（fn），對返回的數據進行操作。
處理跨域方法二——CORS
1.CORS原理
整個CORS通信過程，都是瀏覽器自動完成，不需要用戶參與。對於開發者來說，CORS通信與同源的AJAX通信沒有差別，代碼完全一樣。瀏覽器一旦發現AJAX請求跨源，就會自動添加一些附加的頭信息，有時還會多出一次附加的請求，但用戶不會有感覺。因此，實現CORS通信的關鍵是伺服器。只要伺服器實現了CORS介面，就可以跨源通信。
2.CORS優缺點
CORS要求瀏覽器(>IE10)和伺服器的同時支持，是跨域的根本解決方法，由瀏覽器自動完成。
優點在於功能更加強大支持各種HTTP Method，缺點是兼容性不如JSONP。
處理跨域方法三——WebSocket
Websocket是HTML5的一個持久化的協議，它實現了瀏覽器與伺服器的全雙工通信，同時也是跨域的一種解決方案。WebSocket和HTTP都是應用層協議，都基於 TCP 協議。但是 WebSocket 是一種雙向通信協議，在建立連接之後，WebSocket 的 server 與 client 都能主動向對方發送或接收數據。同時，WebSocket 在建立連接時需要藉助 HTTP 協議，連接建立好了之後 client 與 server 之間的雙向通信就與 HTTP 無關了。
原生WebSocket API使用起來不太方便，我們使用Socket.io，它很好地封裝了webSocket介面，提供了更簡單、靈活的介面，也對不支持webSocket的瀏覽器提供了向下兼容。
處理跨域方法四——postMessage
如果兩個網頁不同源，就無法拿到對方的DOM。典型的例子是iframe窗口和window.open方法打開的窗口，它們與父窗口無法通信。HTML5為了解決這個問題，引入了一個全新的API：跨文檔通信 API（Cross-document messaging）。這個API為window對象新增了一個window.postMessage方法，允許跨窗口通信，不論這兩個窗口是否同源。postMessage方法的第一個參數是具體的信息內容，第二個參數是接收消息的窗口的源（origin），即"協議 + 域名 + 埠"。也可以設為*，表示不限制域名，向所有窗口發送。

『伍』 前端解決跨域都有哪些手段

1. jsonp解決跨域，缺點:只局限於GET請求；應用場景：請求第三方平台數據（比如天氣數據）時使用較多
2. 伺服器端設置Access-Control-Allow-Origin響應頭，允許前端跨域。這種辦法比較便捷，前端不需要調整代碼，一般企業中用的比較多
3. 搭建一個本地的中間伺服器，作為代理，幫助獲取需要跨域的伺服器的數據
4. vue項目可以進行proxy反向代理的配置，實現跨域
黑馬程序員官網有成套免費視頻哦，有什麼不懂的可以直接過去學習。

『陸』 如何解決前端跨域問題

可以使用伺服器代理或者在後端設置允許跨域。
現在的項目一般是在後端設置允許跨域，前端在帶有允許跨域的情況下，可以像沒有跨域一樣正常訪問。
如果前端單獨發布到伺服器，也可以在伺服器是設置代理，使用代理轉發請求。

『柒』 前端請求介面出現跨域問題怎麼解決

  1. 使用jsonp

  2. 響應頭增加CORS跨域響應的信息

  3. 伺服器（同域內的）做一次轉發

『捌』 前端設置請求頭可以解決跨域問題嗎

不可以。
解決跨越常用的幾種方法。
1、jsonp傳輸。
2、代理。
3、CORS，也就是常用的讓服務端設置Access-Control-Allow-Origin:*

或者是Access-Control-Allow-Origin:允許的域名。

『玖』 前端和後台會有跨域問題，一般有哪些方法

『拾』 前端解決跨域都有哪些方法

什麼是跨域？

瀏覽器發送的請求地址（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（代理）

原理：因為同源策略只是針對瀏覽器的安全策略，但是服務端並不受同源策略的限制，也就不存在跨域的問題。

閱讀全文

與前端解決跨域的方法相關的資料

熱點內容
怎麼快速止咳嗽最有效的方法 瀏覽：210
電導率測試筆使用方法 瀏覽：759
下咽癌張口訓練方法 瀏覽：595
硬筆書法教學方法總結 瀏覽：165
分析歸納的研究方法 瀏覽：868
修手機的方法與技巧 瀏覽：554
菌菇水使用方法 瀏覽：741
電腦主頁字體哪裡設置方法 瀏覽：181
膝蓋康復鍛煉方法視頻 瀏覽：250
三角函數的解題技巧和方法 瀏覽：440
上肢鍛煉方法無器械 瀏覽：50
茶枯洗頭的正確方法 瀏覽：746
海外並購風險分析方法 瀏覽：271
水閥漏水解決方法ppr 瀏覽：166
靶向代謝組學分析方法 瀏覽：999
定量研究常用方法 瀏覽：16
怎麼才能祛痘小方法 瀏覽：727
黃褐斑用什麼方法治療 瀏覽：973
高考英語聽力訓練方法 瀏覽：868
兩個月快速長胖的方法 瀏覽：206