免费观看性欧美一级,国产主播AV福利精品一区,久久亚洲国产精品日日av夜夜

成人黃色A片免费看三更小说,精品人妻av区波多野结衣,亚洲第一极品精品无码,欧美综合区自拍亚洲综合,久久99青青精品免费观看,中文字幕在线中字日韩 ,亚洲国产精品18久久久久久,黄色在线免费观看

前端解決跨域問題的常用方法

2019-11-6 seo達人

首先，跨域是什么？

只要協議、域名、端口有任何一個不同，都被當作是不同的域。為什么三者任何一個不同就會產生跨域呢，想想也很容易知道，要是很隨便引用什么外部文件，不同標簽下的頁面引用類似的彼此的文件，瀏覽器很容易懵逼的，保障不了安全問題，但在安全限制的同時也給注入iframe或是ajax請求上帶來了不少麻煩。所以我們要通過一些方法使本域的js能夠操作其他域的頁面對象或者使其他域的js能操作本域的頁面對象

但有兩點至少要清楚：

如果是協議和端口造成的跨域問題“前臺”是無能為力的；

在跨域問題上，域僅僅是通過“URL的首部”來識別而不會去嘗試判斷相同的ip地址對應著兩個域或兩個域是否在同一個ip上。

(“URL的首部”指window.location.protocol +window.location.host，也可以理解為“Domains, protocols and ports must match”。）

1.通過HTML5的postMessage方法跨域

頁面M通過postMessage方法發送消息如下：

window.onload = function() {

var iframe_dom = document.getElementById('iframId');

var targetOrigin = ";

iframe_dom.contentWindow.postMessage('hello world!', targetOrigin);

};

備注：

postMessage的使用方法：

originwindow.postMessage(message, targetOrigin);

originwindow:是說的目標窗口，即要給某個window發消息，是 window.frames 屬性的成員或者由 window.open 方法創建的窗口

message: 是要發送的消息，類型為 String、Object (但IE8、9 不支持)

targetOrigin: 是限定消息接收范圍，不限制請使用 '*

頁面N通過message事件監聽并接受消息如下:

let onmessage = function (event) {

var data = event.data;//由發送窗口傳過來的消息內容

var origin = event.origin;//由發送窗口傳過來的消息來源地址

var source = event.source;//源Window對象

if(origin==";

console.log(data);//hello world!

}

};

if (typeof window.addEventListener != 'undefined') {

window.addEventListener('message', onmessage, false);

} else if (typeof window.attachEvent != 'undefined') {

//for ie

window.attachEvent('onmessage', onmessage);

}

或者為了防止接入方的命名沖突，也可以約定事件名，以此加以區分

例如

window.addEventListener("message", function(event) {

if (

event &&

typeof event.data == "object" &&

event.data.event == "FUNCTION_NAME"

){

document.getElementById("val").innerHTML = event.data.value;

} });

2.通過JSONP

上面那種方式的通信是雙向的，頁面與iframe或是頁面與頁面之間的

JSONP主要是封裝好的請求方式添加callback,這個callback是由前后端約定好的

它的優劣勢：

JSONP的優點：它不像XMLHttpRequest對象實現的Ajax請求那樣受到同源策略的限制；它的兼容性更好，在更加古老的瀏覽器中都可以運行，不需要XMLHttpRequest或ActiveX的支持；并且在請求完畢后可以通過調用callback的方式回傳結果。

JSONP的缺點：它只支持GET請求而不支持POST等其它類型的HTTP請求；它只支持跨域HTTP請求這種情況，不能解決不同域的兩個頁面之間如何進行JavaScript調用的問題；無法判斷它是否請求成功，只能通過timeout

3.CORS跨域

實現CORS通信的關鍵是服務器端，只要服務端那邊實現了CORS接口，就可以跨源通信

CORS（Cross-Origin Resource Sharing）跨域資源共享，定義了必須在訪問跨域資源時，瀏覽器與服務器應該如何溝通。CORS背后的基本思想就是使用自定義的HTTP頭部讓瀏覽器與服務器進行溝通，從而決定請求或響應是應該成功還是失敗。目前，所有瀏覽器都支持該功能，IE瀏覽器不能低于IE10。整個CORS通信過程，都是瀏覽器自動完成，不需要用戶參與。對于開發者來說，CORS通信與同源的AJAX通信沒有差別，代碼完全一樣。瀏覽器一旦發現AJAX請求跨源，就會自動添加一些附加的頭信息，有時還會多出一次附加的請求，但用戶不會有感覺

服務器端對于CORS的支持，主要就是通過設置Access-Control-Allow-Origin來進行的。如果瀏覽器檢測到相應的設置，便可以允許Ajax進行跨域的訪問

CORS和JSONP對比

JSONP只能實現GET請求，而CORS支持所有類型的HTTP請求。

使用CORS，開發者可以使用普通的XMLHttpRequest發起請求和獲得數據，比起JSONP有更好的錯誤處理。

JSONP主要被老的瀏覽器支持，它們往往不支持CORS，而絕大多數現代瀏覽器都已經支持了CORS）。

CORS與JSONP相比，顯然更為先進、方便和可靠。

4.設置代理

目前市場上用vue技術不在少數，下面介紹一種配置代理方式

在vue.config.js該文件里面配置如下：

devServer: {

port: 8001,

open: true,

disableHostCheck: true,

proxy: {

'/api': {

target: 'https:/xxx.com',

secure: true, // false為http訪問，true為https訪問

ws: true,

changeOrigin: true,

pathRewrite: {

'^/api': ''

}

}

}

}

后面請求是需要帶上‘/api’請求即可

« 關于異常狀態的設計總結如何才能更加靈活的使用網格？ »

日歷

鏈接

個人資料

藍藍設計的小編 http://www.lzhte.cn

存檔

前端解決跨域問題的常用方法

分類

日歷

鏈接

個人資料

存檔