① is 跨域處理方式
1、通過後端代理的方式。即前端訪問的域名不變,根據域名後的資源路徑由後端伺服器進行訪問獲取數據後再返回給前端。
2、jsonp的方式,這個我個人比較推薦,尤其是一些對外開放的數據。但是主要應用於get請求,其他請求方式不起效果。
3、跨域資源共享。Java後端的話可以在RequstMapping括弧請求路徑上添加@CrossOrigin這個方式去實現允許介面跨域訪問,通過返回請求頭。這樣就可以is跨域處理方式。
② 新手疑問:關於Ajax跨域請求express後端的問題
//說明下:因為下面要用到res.body獲取到前端傳過來的參數,用res.body的前提是首先導入body-parser
//跨域處理:
app.all('*',function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE,OPTIONS');
if (req.method == 'OPTIONS') {
res.send(200);
}
③ 請教WEB前端和後端分離的ajax跨域通信問題
javascript 跨域涉及三點
1、ajax 用 jsonp。
2、介面站點根目錄需要增加crossdomain.xml文件。
3、介面站點需要發送header( 'Access-Control-Allow-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);
}
⑤ 如何解決前端跨域問題
可以使用伺服器代理或者在後端設置允許跨域。
現在的項目一般是在後端設置允許跨域,前端在帶有允許跨域的情況下,可以像沒有跨域一樣正常訪問。
如果前端單獨發布到伺服器,也可以在伺服器是設置代理,使用代理轉發請求。
⑥ 前端調用介面跨域怎麼解決
需要後端運行跨域。
後端在響應頭加入允許跨域的參數就可以了。
前端也可以使用代理插件對原域名進行代理訪問。
⑦ 前後端分離 跨域問題
建議不要使用Jsonp解決跨域,後端的入口文件可以加上下面三句話解決跨域
header('Access-Control-Allow-Methods:POST,GET');
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Origin: *'); //*代表可訪問的地址,可以設置指定域名