js跨域問題解決的詳細代碼,js跨域問題怎麼解決

本文目錄一覽：

• 1、跨域問題解決方法
• 2、js 跨域該如何解決
• 3、怎麼解決跨域問題
• 4、如何解決js跨域問題

跨域問題解決方法

跨域？他是瀏覽器的 同源策略 造成的，是瀏覽器對javascript施加的安全限制。所謂同源是指：域名、協議、端口均相同。

解決

原理：利用標籤具有可跨域的特性，可實現跨域訪問接口，需要後端的支持。

服務器在收到請求後，解析參數，計算返還數據，輸出messagetow（data）字符串。

缺點：只能發送get請求，無法訪問服務器的響應文本（單向請求），即只能獲取數據不能改數據。

通過ajax請求不同域的實現，底層不是靠XmlHttpRequest而是script，所以不要被這個方法給迷惑了。

在ajax請求中類型如果是type是get post，其實內部都只會用get，因為其跨域的原理就是用的動態加載script的src，所以我們只能把參數通過url的方式傳遞

其實jquery內部會轉化成

然後動態加載;action=aaron”

;action=aaron”script type=”text/javascript” src=” “/script

;action=aaron”

;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客戶端（瀏覽器）

js 跨域該如何解決

可以採用jquery的jsonp方式

採用jquery可以免去自己寫一些重複的代碼。具體使用不多贅述，具體百度 jsonp

怎麼解決跨域問題

1、 通過jsonp跨域

JSONP（JSON with Padding：填充式JSON)，應用JSON的一種新方法，

JSON、JSONP的區別：

1、JSON返回的是一串數據、JSONP返回的是腳本代碼(包含一個函數調用)

2、JSONP 只支持get請求、不支持post請求

(類似往頁面添加一個script標籤，通過src屬性去觸發對指定地址的請求,故只能是Get請求)

2、代理：

需要調用，可以寫一個接口，由這個接口在後端去調用並拿到返回值，然後再返回給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，因為這是當前域的子域，也不可以設成baidu.com，因為主域已經不相同了。

兼容性：所有瀏覽器都支持；

優點：

　可以實現不同window之間的相互訪問和操作；

缺點：

　只適用於父子window之間的通信，不能用於xhr；

　只能在主域相同且子域不同的情況下使用；

使用方式：

　不同的框架之間是可以獲取window對象的，但卻無法獲取相應的屬性和方法。比如，有一個頁面，它的地址是 ， 在這個頁面裡面有一個iframe，它的src是, 很顯然，這個頁面與它裡面的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=”” onload = “test()”/iframe

這個時候，document.domain就可以派上用場了，我們只要把 和 這兩個頁面的document.domain都設成相同的域名就可以了。

1.在頁面 中設置document.domain:

iframe id = “iframe” src=”” onload = “test()”/iframe

script type=”text/javascript”

document.domain = ‘example.com’;//設置成主域

function test(){

alert(document.getElementById(‘iframe’).contentWindow);//contentWindow 可取得子窗口的 window 對象

}

/script

2.在頁面 中也設置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);

}

如何解決js跨域問題

解決js跨域問題有以下一種方式

使用jsonp

服務端代理

服務端設置Request Header頭中Access-Control-Allow-Origin為指定可獲取數據的域名