利用jsonp與代理服務(wù)器方案解決跨域問題
前言
本文將從實踐角度介紹如何使用jsonp和代理服務(wù)器方案解決跨域問題,分享出來供大家參考學(xué)習(xí),下面話不多說了,來一起看看詳細的介紹吧。
瀏覽器為了保護用戶安全,引入了同源策略,即一個服務(wù)器頁面無法訪問另一個協(xié)議、域名、端口不同的服務(wù)器數(shù)據(jù)。當(dāng)頁面需要跨服務(wù)器訪問另一個服務(wù)器的數(shù)據(jù)時,即產(chǎn)生跨域行為。以豆瓣的公開API(https://api.douban.com/v2/book/1220562)為例,當(dāng)前我的服務(wù)器處于http://127.0.0.1:5000下,豆瓣的服務(wù)器很顯然跟我的服務(wù)器不同源,服務(wù)器中的一個頁面通過AJAX請求該接口時,瀏覽器會發(fā)出如下警告,并且頁面獲取數(shù)據(jù)失敗:
在實際開發(fā)中,如果遇到這樣的跨域問題,可以通過以下辦法獲得跨域的數(shù)據(jù):
- 異源服務(wù)器的響應(yīng)頭部設(shè)置Access-Control-Allow-Origin允許跨域行為
- JSONP
- 設(shè)置自己的代理服務(wù)器轉(zhuǎn)發(fā)異源的數(shù)據(jù)
對于第一種設(shè)置Access-Control-Allow-Origin的方法,如果在Python Flask搭建的服務(wù)器下,可以設(shè)置一個簡單的修飾器:
from functools import wraps from flask import make_response def allow_cross_domain(fun): @wraps(fun) def wrapper_fun(*args, **kwargs): rst = make_response(fun(*args, **kwargs)) rst.headers['Access-Control-Allow-Origin'] = '*' rst.headers['Access-Control-Allow-Methods'] = 'PUT,GET,POST,DELETE' allow_headers = "Referer,Accept,Origin,User-Agent" rst.headers['Access-Control-Allow-Headers'] = allow_headers return rst return wrapper_fun @app.route('/hosts/') @allow_cross_domain def domains(): pass
如果在express搭建的服務(wù)器中,類似的可以加入這樣一個中間件:
//allow custom header and CORS 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); /讓options請求快速返回/ } else { next(); } });
但是設(shè)置Access-Control-Allow-Origin的方法有個致命的缺陷,就是只能在提供接口的服務(wù)器上進行添加,如果該服務(wù)器不是自己開發(fā)的話(例如上面提到的豆瓣公開API),這個方法基本可以忽略,那么留給我們自由發(fā)揮的方法就只有JSONP和代理服務(wù)器了。網(wǎng)上有關(guān)于很多JSONP和代理服務(wù)器解決跨域的介紹,但都缺少具體的實踐案例,本文將通過具體的實際案例來了解這兩個跨域方式的具體實現(xiàn)。
撰寫本文時,我手頭上可以直接拿來用的后端方案為Flash搭建的RESTful服務(wù)器,前端方案為Vue 1.0 + vue-resource進行Ajax,故下面所述具體的實踐操作都在這兩個環(huán)境上進行,如果你的開發(fā)環(huán)境和這個有差異也沒關(guān)系,本文將有最少的邏輯代碼來展示跨域的實現(xiàn)原理,其他方案可觸類旁通。
JSONP
瀏覽器的同源策略限制的跨域的Ajax請求資源,但是script標簽中的資源卻可以跨域獲取,很常見的就是我們通過script標簽引用其他服務(wù)器的js:
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
JSONP的原理就是利用瀏覽器對script標簽沒有同源限制,動態(tài)創(chuàng)建script標簽,把需要請求的API放在script標簽的src不受同源策略限制的特性來獲得數(shù)據(jù)。
JSONP由回調(diào)函數(shù)(callback)和返回的數(shù)據(jù)(response)兩部分組成?;卣{(diào)函數(shù)(callback)是當(dāng)script創(chuàng)建src引入資源結(jié)束時調(diào)用,返回的數(shù)據(jù)(response)作為回調(diào)函數(shù)的第一個參數(shù)傳入,在回調(diào)函數(shù)里即可保存獲得的不同源數(shù)據(jù)。具體來看例子,我們在頁面加載的時候獲取數(shù)據(jù),請求https://api.douban.com/v2/book/1220562:
// 在vue中需要將回調(diào)函數(shù)作為一個全局函數(shù),否則在vue的生命周期中將獲取不到這個回調(diào)函數(shù) var d = null; function handleResponse(response){ console.log(response); d = response; } compiled: function() { var self = this; // jsonp var script = document.createElement("script"); // 動態(tài)創(chuàng)建標簽 script.src = "https://api.douban.com/v2/book/1220562?callback=handleResponse"; // 創(chuàng)建的src就是請求的API,同時需要給這個src加上一個callback的query參數(shù),參數(shù)名字就是你的回調(diào)函數(shù)名字 document.body.appendChild(script, document.body.firstChild); // 插入新創(chuàng)建的script標簽,這里類似Ajax發(fā)起請求 // 輪詢資源獲取是否結(jié)束 var timer = setInterval(function () { if (d) { console.log('pending') clearInterval(timer); self.data = d; // 將獲取的數(shù)據(jù)賦值給數(shù)據(jù)model中 } }, 500); }
此時刷新頁面,瀏覽器不再發(fā)出Access-Control-Allow-Origin的跨域錯誤,輸出通過script獲取到的數(shù)據(jù):
JSONP的缺點
JSONP的缺點主要源自他的script引用資源方式,JSONP的缺點如下:
- JSONP是通過script標簽獲取資源的,也就是說JSONP注定只能用GET的方式訪問資源,GET以外的請求無法做到;
- JSONP是通過src引用不同源的代碼,如果其他域的代碼存在惡意代碼,那么這將造成嚴重的網(wǎng)絡(luò)安全,如果需要跨域的服務(wù)器不足以信任,那么必須放棄JSONP;
- 要確定JSONP請求是否成功,需要啟動一個計時器監(jiān)測數(shù)據(jù)變動。
針對以上JSONP的缺點,如果需要進行改進,就需要使用代理服務(wù)器了。
代理服務(wù)器
代理服務(wù)器解決跨域的思路是利用代理服務(wù)器對瀏覽器頁面的請求進行轉(zhuǎn)發(fā),因為同源策略的限制只存在在瀏覽器中,到了服務(wù)器端就沒有這個限制了,常用的代理服務(wù)器方案有使用反向代理服務(wù)器以及服務(wù)器內(nèi)轉(zhuǎn)發(fā),使用反向代理服務(wù)器的例子是Nginx的反向代理,通過修改Nginx的配置文件,將指定的不同源域名代理到當(dāng)前服務(wù)器上,瀏覽器就可以正常訪問不同源的資源了。還有個方案是不依賴反向代理服務(wù)器,在server端對不同源的API進行轉(zhuǎn)發(fā),本文主要對這種方法進行介紹。
首先代理服務(wù)器需要知道瀏覽器頁面需要請求的API,因此,頁面需要把API當(dāng)做參數(shù)傳遞給代理服務(wù)器,形如:/proxy/:api,api參數(shù)是完整的API鏈接,如之前提到的豆瓣公共API:https://api.douban.com/v2/book/1220562。server端對API進行轉(zhuǎn)發(fā),在Python中可以使用requests發(fā)起HTTP請求,nodejs可以使用request,server端獲得響應(yīng)后將響應(yīng)的結(jié)果返回給瀏覽器,具體的實現(xiàn)也很簡單,以Flask為例:
@app.route('/proxy/<path:url>', methods=['GET']) def getTasks(url): r = requests.get(url) ## 請求轉(zhuǎn)發(fā) conver_r = eval(bytes.decode(r.content)) ##進行一些類型轉(zhuǎn)化 return json.dumps(conver_r), 200
在瀏覽器端發(fā)起請求的具體代碼為:
self.$http.get('/proxy/https://api.douban.com/v2/book/1220562').then(function(res) { self.data = JSON.parse(res.data) });
此時打開瀏覽器控制臺,可以看到server轉(zhuǎn)發(fā)的請求結(jié)果,跨域成功。
與JSONP相比代理服務(wù)器的優(yōu)點
相比JSONP,使用代理服務(wù)器轉(zhuǎn)發(fā)不同源API的優(yōu)點如下:
- 資源獲取是通過server端進行,可以根據(jù)需要轉(zhuǎn)發(fā)的API選擇使用GET以外的HTTP方法進行資源請求;
- 請求的資源需要經(jīng)過server端轉(zhuǎn)發(fā)到瀏覽器端,server端可以對資源進行處理,因此可以避免一些直接的惡意代碼,比JSONP更安全;
- 瀏覽器頁面正常使用Ajax請求數(shù)據(jù),通過回調(diào)可以得知請求是否結(jié)束,不再需要使用計時器監(jiān)測。
代理服務(wù)器的缺點
使用代理服務(wù)器的缺點是對不同源資源的轉(zhuǎn)發(fā)請求,如果同時多個用戶進行跨域請求,因為服務(wù)器內(nèi)部需要進行額外的HTTP請求,那么服務(wù)器端的處理壓力降會變大,從而導(dǎo)致阻塞等一系列性能問題,如需更好的方案,還是得使用Nginx等反向代理服務(wù)器進行端口代理處理。
總結(jié)
本文從實踐的角度介紹了JSONP和代理服務(wù)器的處理跨域的做法,并對比了兩種方案的優(yōu)缺點,如果是一些安全要求性不高的場景,可以直接使用JSONP進行跨域請求,如果是需要額外的HTTP請求并且安全性要求較高,跨域請求還是從server端發(fā)起為佳,當(dāng)然還有其他跨域方案,需要讀者根據(jù)自身的能力和判斷去舍取。
好了,以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關(guān)文章
淺談js在html中的加載執(zhí)行順序,多個jquery ready執(zhí)行順序
下面小編就為大家?guī)硪黄獪\談js在html中的加載執(zhí)行順序,多個jquery ready執(zhí)行順序。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-11-11JavaScript中eval和with語句如何影響作用域鏈的深度探索
這篇文章主要為大家介紹了JavaScript中eval和with語句如何影響作用域鏈的深度探索,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-05-05PPK 談 JavaScript 的 this 關(guān)鍵字 [翻譯]
在 JavaScript 中 this 是最強的關(guān)鍵字之一。這篇貼文就是要告訴你如何用好 this。2009-09-09javascript結(jié)合canvas實現(xiàn)圖片旋轉(zhuǎn)效果
圖片的旋轉(zhuǎn)可以說是一種效果,但是逐漸旋轉(zhuǎn)已經(jīng)不單單是屬于視覺效果那個范疇,其更具有使用性,功能性。照片有時候是需要橫過來的拍的,當(dāng)我們預(yù)覽或共享到web上時需要進行旋轉(zhuǎn)。這個操作在以往可能更多的是交給軟件去完成,然后再將旋轉(zhuǎn)到正常角度的圖片發(fā)布到web上。2015-05-05