常見跨域解決方法

Ⅰ 跨域有哪幾種方式

跨源資源共享

通過 XHR 實現 Ajax 通信的一個主要限制,來源於跨域安全策略。默認情況下,XHR 對象只能訪 問與包含它的頁面位於同一個域中的資源。這種安全策略可以預防某些惡意行為。但是,實現合理的跨 域請求對開發某些瀏覽器應用程序也是至關重要的。

CORS(Cross-Origin Resource Sharing,跨源資源共享)是 W3C 的一個工作草案,定義了在必須訪 問跨源資源時,瀏覽器與伺服器應該如何溝通。CORS 背後的基本思想,就是使用自定義的 HTTP 頭部 讓瀏覽器與伺服器進行溝通,從而決定請求或響應是應該成功,還是應該失敗。

比如一個簡單的使用 GET 或 POST 發送的請求,它沒有自定義的頭部,而主體內容是 text/plain。在 發送該請求時,需要給它附加一個額外的 Origin 頭部,其中包含請求頁面的源信息(協議、域名和端 口),以便伺服器根據這個頭部信息來決定是否給予響應。下面是 Origin 頭部的一個示例:

這個例子通過查詢地理定位服務來顯示你的 IP 地址和位置信息。
JSONP 之所以在開發人員中極為流行,主要原因是它非常簡單易用。與圖像 Ping 相比,它的優點 在於能夠直接訪問響應文本,支持在瀏覽器與伺服器之間雙向通信。不過,JSONP 也有兩點不足。

• 首先,JSONP 是從其他域中載入代碼執行。如果其他域不安全,很可能會在響應中夾帶一些惡意代碼,而此時除了完全放棄 JSONP 調用之外,沒有辦法追究。因此在使用不是你自己運維的 Web 服務時, 一定得保證它安全可靠。

  
  

• 其次,要確定 JSONP 請求是否失敗並不容易。雖然 HTML5 給<script>元素新增了一個 onerror 事件處理程序,但目前還沒有得到任何瀏覽器支持。為此,開發人員不得不使用計時器檢測指定時間內是否接收到了響應。但就算這樣也不能盡如人意,畢竟不是每個用戶上網的速度和帶寬都一樣。

  
  

參考：javascript高級程序設計第21章

Ⅱ 如何解決跨域問題

同源策略

在運行中我們有時會出錯是因為我們違反了同源策略，這是一種瀏覽器所實施的安全措施，用於限制具有不同來源的文檔之間的交互。頁面的來源由其協議，主機和埠號定義。具有相同來源的資源可以相互完全訪問。但是如果具有不相同的源將會拒絕訪問。

1

2

3

http://www.a.com/a.js

http://www.b.com/a.js

這兩個之間就不可以互相訪問，因為域名的不相同

域名組成



如果上面兩個域名想互相訪問就需要跨域請求，一般情況下同源政策規定：允許跨源 寫入，而不允許跨源 讀取這意味著同源政策不會阻止將數據寫入，只會禁止他們從域中讀取數據， 或者對從其域收到的響應做任何事情。

跨域請求的方法

JSONP

JSONP 稱為帶有填充的JavaScript對象表示，是一種通過利用HTML頁面中的腳本標記可以來載入來自不同來源的代碼來執實現跨域請求的方法。JSONP依賴於<script>標簽可以來自不同來源的事實。當瀏覽器解析<script>標記時，它將獲取腳本內容，並在當前頁面的上下文中執行它。通常，服務將返回HTML或以XML或JSON等數據格式表示的某些數據。但是，當向啟用JSONP的伺服器發出請求時，它會返回一個腳本塊，該腳本塊在執行時會調用頁面指定的回調函數，並將實際數據作為參數提供

注意：它沒有相同的源點限制，即使在舊瀏覽器中也具有良好的兼容性但是JSONP只能用於執行跨域GET請求，伺服器必須顯式支持JSONP請求。



CORS方法

為伺服器提供了一種機制，告訴瀏覽器可以請求域A讀取來自域B的數據。通過在響應中包含一個新的 Access-Control-Allow-OriginHTTP頭來完成的，當瀏覽器收到來自跨源源的響應時，它將檢查CORS頭。如果響應頭中指定的源點與當前源點相匹配，則允許對響應進行讀訪問，否則就會報錯。

與jsonp相比，CORS具有以下優勢：

它不僅支持GET請求，還支持POST等其他請求

它可以使用XMLHttpRequest發送和接收數據，並具有更好的錯誤處理機制

Ⅲ 前端解決跨域都有哪些方法

什麼是跨域？

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

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

Ⅳ 如何解決前端跨域問題

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

Ⅳ 跨域產生的原因和解決方法

同源策略。
同源策略是一種約定，由Netscape公司1995年引入瀏覽器，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受到XSS、CSFR等攻擊。所謂同源是指"協議+域名+埠"三者相同，即便兩個不同的域名指向同一個ip地址，也非同源。同源策略限制以下幾種行為：Cookie，LocalStorage和IndexDB無法讀取DOM和JS對象無法獲得AJAX請求不能發送
解決方案：JSONP跨域。原理：就是利用標簽沒有跨域限制，通過標簽src屬性，發送帶有callback參數的GET請求，服務端將介面返回數據拼湊到callback函數中，返回給瀏覽器，瀏覽器解析執行，從而前端拿到callback函數返回的數據。缺點：只能發送get一種請求。

Ⅵ 前端跨域方式有哪些

處理跨域方法一——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跨域
JSONP（JSON with Padding：填充式JSON)，應用JSON的一種新方法，
JSON、JSONP的區別：
1、JSON返回的是一串數據、JSONP返回的是腳本代碼(包含一個函數調用)
2、JSONP 只支持get請求、不支持post請求
(類似往頁面添加一個script標簽，通過src屬性去觸發對指定地址的請求,故只能是Get請求)

2、代理：
www..com/index.html需要調用www.sina.com/server.php，可以寫一個介面www..com/server.php，由這個介面在後端去調用www.sina.com/server.php並拿到返回值，然後再返回給index.html
3、PHP端修改header
header(『Access-Control-Allow-Origin:*』);//允許所有來源訪問
header(『Access-Control-Allow-Method:POST,GET』);//允許訪問的方式
4、document.domain
跨域分為兩種，一種xhr不能訪問不同源的文檔，另一種是不同window之間不能進行交互操作;
document.domain主要是解決第二種情況，且只能適用於主域相同子域不同的情況；
document.domain的設置是有限制的，我們只能把document.domain設置成自身或更高一級的父域，且主域必須相同。例如：a.b.example.com中某個文檔的document.domain可以設成a.b.example.com、b.example.com 、example.com中的任意一個，但是不可以設成c.a.b.example.com，因為這是當前域的子域，也不可以設成.com，因為主域已經不相同了。
兼容性：所有瀏覽器都支持；
優點：
可以實現不同window之間的相互訪問和操作；
缺點：
只適用於父子window之間的通信，不能用於xhr；
只能在主域相同且子域不同的情況下使用；
使用方式：
不同的框架之間是可以獲取window對象的，但卻無法獲取相應的屬性和方法。比如，有一個頁面，它的地址是http://www.example.com/a.html ， 在這個頁面裡面有一個iframe，它的src是http://example.com/b.html, 很顯然，這個頁面與它裡面的iframe框架是不同域的，所以我們是無法通過在頁面中書寫js代碼來獲取iframe中的東西的：

<script type="text/javascript">
function test(){
var iframe = document.getElementById('ifame');
var win = document.contentWindow;//可以獲取到iframe里的window對象，但該window對象的屬性和方法幾乎是不可用的
var doc = win.document;//這里獲取不到iframe里的document對象
var name = win.name;//這里同樣獲取不到window對象的name屬性
}
</script>
<iframe id = "iframe" src="http://example.com/b.html" onload = "test()"></iframe>
這個時候，document.domain就可以派上用場了，我們只要把http://www.example.com/a.html 和 http://example.com/b.html這兩個頁面的document.domain都設成相同的域名就可以了。
1.在頁面 http://www.example.com/a.html 中設置document.domain:

<iframe id = "iframe" src="http://example.com/b.html" onload = "test()"></iframe>
<script type="text/javascript">
document.domain = 'example.com';//設置成主域
function test(){
alert(document.getElementById('iframe').contentWindow);//contentWindow 可取得子窗口的 window 對象
}
</script>
2.在頁面 http://example.com/b.html 中也設置document.domain:

<script type="text/javascript">
document.domain = 'example.com';//在iframe載入這個頁面也設置document.domain，使之與主頁面的document.domain相同
</script>
5、window.name
關鍵點：window.name在頁面的生命周期里共享一個window.name;
兼容性：所有瀏覽器都支持；
優點：
最簡單的利用了瀏覽器的特性來做到不同域之間的數據傳遞；
不需要前端和後端的特殊配製；
缺點：
大小限制：window.name最大size是2M左右，不同瀏覽器中會有不同約定；
安全性：當前頁面所有window都可以修改，很不安全；
數據類型：傳遞數據只能限於字元串，如果是對象或者其他會自動被轉化為字元串，如下；
這里寫圖片描述
使用方式：修改window.name的值即可；
6、postMessage
關鍵點：
postMessage是h5引入的一個新概念，現在也在進一步的推廣和發展中，他進行了一系列的封裝，我們可以通過window.postMessage的方式進行使用，並可以監聽其發送的消息；
兼容性：移動端可以放心用，但是pc端需要做降級處理
優點
不需要後端介入就可以做到跨域，一個函數外加兩個參數（請求url，發送數據）就可以搞定；
移動端兼容性好；
缺點
無法做到一對一的傳遞方式：監聽中需要做很多消息的識別，由於postMessage發出的消息對於同一個頁面的不同功能相當於一個廣播的過程，該頁面的所有onmessage都會收到，所以需要做消息的判斷；
安全性問題：三方可以通過截獲，注入html或者腳本的形式監聽到消息，從而能夠做到篡改的效果，所以在postMessage和onmessage中一定要做好這方面的限制；
發送的數據會通過結構化克隆演算法進行序列化，所以只有滿足該演算法要求的參數才能夠被解析，否則會報錯，如function就不能當作參數進行傳遞；
使用方式：通信的函數，sendMessage負責發送消息，bindEvent負責消息的監聽並處理，可以通過代碼來做一個大致了解；

Storage.prototype.sendMessage_ = function(type, params, fn) {
if (this.topWindow) {
this.handleCookie_(type, params, fn);
return;
}
var eventId = this.addToQueue_(fn, type);
var storageIframe = document.getElementById('mip-storage-iframe');
var element = document.createElement("a");
element.href = this.origin;
var origin = element.href.slice(0, element.href.indexOf(element.pathname) + 1);
storageIframe.contentWindow.postMessage({
type: type,
params: params,
eventId: eventId
}, origin);
}
Storage.prototype.bindEvent_ = function() {
window.onmessage = function (res) {
// 判斷消息來源
if (window == res.source.window.parent &&
res.data.type === this.messageType.RES &&
window.location.href.match(res.origin.host).length > 0) {
var fn = this.eventQueue[res.data.eventId];
fn && fn();
delete this.eventQueue[res.data.eventId];
// reset id
var isEmpty = true;
for (var t in this.eventQueue) {
isEmpty = false;
}
if (isEmpty) {
this.id = 0;
}
}
}.bind(this);
}

Ⅷ 什麼是跨域如何解決跨域問題

什麼是跨域？
跨域，指的是瀏覽器不能執行其他網站的腳本。它是由瀏覽器的同源策略造成的，是瀏覽器對JavaScript施加的安全限制
解決辦法：
1、JSONP：
使用方式就不贅述了，但是要注意JSONP只支持GET請求，不支持POST請求。
2、代理：
例如www.123.com/index.html需要調用www.456.com/server.php，可以寫一個介面www.123.com/server.php，由這個介面在後端去調用www.456.com/server.php並拿到返回值，然後再返回給index.html，這就是一個代理的模式。相當於繞過了瀏覽器端，自然就不存在跨域問題。
3、PHP端修改header（XHR2方式）
在php介面腳本中加入以下兩句即可：
header('Access-Control-Allow-Origin:*');//允許所有來源訪問
header('Access-Control-Allow-Method:POST,GET');//允許訪問的方式

Ⅸ 前端解決跨域都有哪些手段

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