前言

本文將從實(shí)踐角度介紹如何使用jsonp和代理服務(wù)器方案解決跨域問題，分享出來供大家參考學(xué)習(xí)，下面話不多說了，來一起看看詳細(xì)的介紹吧。

瀏覽器為了保護(hù)用戶安全，引入了同源策略，即一個(gè)服務(wù)器頁面無法訪問另一個(gè)協(xié)議、域名、端口不同的服務(wù)器數(shù)據(jù)。當(dāng)頁面需要跨服務(wù)器訪問另一個(gè)服務(wù)器的數(shù)據(jù)時(shí)，即產(chǎn)生跨域行為。以豆瓣的公開API（https://api.douban.com/v2/book/1220562）為例，當(dāng)前我的服務(wù)器處于http://127.0.0.1:5000下，豆瓣的服務(wù)器很顯然跟我的服務(wù)器不同源，服務(wù)器中的一個(gè)頁面通過AJAX請(qǐng)求該接口時(shí)，瀏覽器會(huì)發(fā)出如下警告，并且頁面獲取數(shù)據(jù)失敗:

在實(shí)際開發(fā)中，如果遇到這樣的跨域問題，可以通過以下辦法獲得跨域的數(shù)據(jù)：

對(duì)于第一種設(shè)置Access-Control-Allow-Origin的方法，如果在Python Flask搭建的服務(wù)器下，可以設(shè)置一個(gè)簡(jiǎn)單的修飾器：

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ù)器中，類似的可以加入這樣一個(gè)中間件:

//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請(qǐng)求快速返回/
 }
 else {
 next();
 }
});

但是設(shè)置Access-Control-Allow-Origin的方法有個(gè)致命的缺陷，就是只能在提供接口的服務(wù)器上進(jìn)行添加，如果該服務(wù)器不是自己開發(fā)的話（例如上面提到的豆瓣公開API），這個(gè)方法基本可以忽略，那么留給我們自由發(fā)揮的方法就只有JSONP和代理服務(wù)器了。網(wǎng)上有關(guān)于很多JSONP和代理服務(wù)器解決跨域的介紹，但都缺少具體的實(shí)踐案例，本文將通過具體的實(shí)際案例來了解這兩個(gè)跨域方式的具體實(shí)現(xiàn)。

撰寫本文時(shí)，我手頭上可以直接拿來用的后端方案為Flash搭建的RESTful服務(wù)器，前端方案為Vue 1.0 + vue-resource進(jìn)行Ajax，故下面所述具體的實(shí)踐操作都在這兩個(gè)環(huán)境上進(jìn)行，如果你的開發(fā)環(huán)境和這個(gè)有差異也沒關(guān)系，本文將有最少的邏輯代碼來展示跨域的實(shí)現(xiàn)原理，其他方案可觸類旁通。

JSONP

瀏覽器的同源策略限制的跨域的Ajax請(qǐng)求資源，但是script標(biāo)簽中的資源卻可以跨域獲取，很常見的就是我們通過script標(biāo)簽引用其他服務(wù)器的js：

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

JSONP的原理就是利用瀏覽器對(duì)script標(biāo)簽沒有同源限制，動(dòng)態(tài)創(chuàng)建script標(biāo)簽，把需要請(qǐng)求的API放在script標(biāo)簽的src不受同源策略限制的特性來獲得數(shù)據(jù)。

JSONP由回調(diào)函數(shù)(callback)和返回的數(shù)據(jù)(response)兩部分組成。回調(diào)函數(shù)(callback)是當(dāng)script創(chuàng)建src引入資源結(jié)束時(shí)調(diào)用，返回的數(shù)據(jù)(response)作為回調(diào)函數(shù)的第一個(gè)參數(shù)傳入，在回調(diào)函數(shù)里即可保存獲得的不同源數(shù)據(jù)。具體來看例子，我們?cè)陧撁婕虞d的時(shí)候獲取數(shù)據(jù)，請(qǐng)求https://api.douban.com/v2/book/1220562：

// 在vue中需要將回調(diào)函數(shù)作為一個(gè)全局函數(shù)，否則在vue的生命周期中將獲取不到這個(gè)回調(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"); // 動(dòng)態(tài)創(chuàng)建標(biāo)簽
 script.src = "https://api.douban.com/v2/book/1220562?callback=handleResponse"; // 創(chuàng)建的src就是請(qǐng)求的API，同時(shí)需要給這個(gè)src加上一個(gè)callback的query參數(shù)，參數(shù)名字就是你的回調(diào)函數(shù)名字
 document.body.appendChild(script, document.body.firstChild); // 插入新創(chuàng)建的script標(biāo)簽，這里類似Ajax發(fā)起請(qǐng)求
 
 // 輪詢資源獲取是否結(jié)束
 var timer = setInterval(function () {
 if (d) {
 console.log('pending')
 clearInterval(timer);
 self.data = d； // 將獲取的數(shù)據(jù)賦值給數(shù)據(jù)model中
 }
 }, 500);
}

此時(shí)刷新頁面，瀏覽器不再發(fā)出Access-Control-Allow-Origin的跨域錯(cuò)誤，輸出通過script獲取到的數(shù)據(jù):

JSONP的缺點(diǎn)

JSONP的缺點(diǎn)主要源自他的script引用資源方式，JSONP的缺點(diǎn)如下：

針對(duì)以上JSONP的缺點(diǎn)，如果需要進(jìn)行改進(jìn)，就需要使用代理服務(wù)器了。

代理服務(wù)器

代理服務(wù)器解決跨域的思路是利用代理服務(wù)器對(duì)瀏覽器頁面的請(qǐng)求進(jìn)行轉(zhuǎn)發(fā)，因?yàn)橥床呗缘南拗浦淮嬖谠跒g覽器中，到了服務(wù)器端就沒有這個(gè)限制了，常用的代理服務(wù)器方案有使用反向代理服務(wù)器以及服務(wù)器內(nèi)轉(zhuǎn)發(fā)，使用反向代理服務(wù)器的例子是Nginx的反向代理，通過修改Nginx的配置文件，將指定的不同源域名代理到當(dāng)前服務(wù)器上，瀏覽器就可以正常訪問不同源的資源了。還有個(gè)方案是不依賴反向代理服務(wù)器，在server端對(duì)不同源的API進(jìn)行轉(zhuǎn)發(fā)，本文主要對(duì)這種方法進(jìn)行介紹。

首先代理服務(wù)器需要知道瀏覽器頁面需要請(qǐng)求的API，因此，頁面需要把API當(dāng)做參數(shù)傳遞給代理服務(wù)器，形如：/proxy/:api，api參數(shù)是完整的API鏈接，如之前提到的豆瓣公共API：https://api.douban.com/v2/book/1220562。server端對(duì)API進(jìn)行轉(zhuǎn)發(fā)，在Python中可以使用requests發(fā)起HTTP請(qǐng)求，nodejs可以使用request，server端獲得響應(yīng)后將響應(yīng)的結(jié)果返回給瀏覽器，具體的實(shí)現(xiàn)也很簡(jiǎn)單，以Flask為例：

@app.route('/proxy/<path:url>', methods=['GET'])
def getTasks(url):
 r = requests.get(url) ## 請(qǐng)求轉(zhuǎn)發(fā)
 conver_r = eval(bytes.decode(r.content)) ##進(jìn)行一些類型轉(zhuǎn)化

 return json.dumps(conver_r), 200

在瀏覽器端發(fā)起請(qǐng)求的具體代碼為：

self.$http.get('/proxy/https://api.douban.com/v2/book/1220562').then(function(res) {
 self.data = JSON.parse(res.data)
});

此時(shí)打開瀏覽器控制臺(tái)，可以看到server轉(zhuǎn)發(fā)的請(qǐng)求結(jié)果，跨域成功。

與JSONP相比代理服務(wù)器的優(yōu)點(diǎn)

相比JSONP，使用代理服務(wù)器轉(zhuǎn)發(fā)不同源API的優(yōu)點(diǎn)如下：

代理服務(wù)器的缺點(diǎn)

使用代理服務(wù)器的缺點(diǎn)是對(duì)不同源資源的轉(zhuǎn)發(fā)請(qǐng)求，如果同時(shí)多個(gè)用戶進(jìn)行跨域請(qǐng)求，因?yàn)榉?wù)器內(nèi)部需要進(jìn)行額外的HTTP請(qǐng)求，那么服務(wù)器端的處理壓力降會(huì)變大，從而導(dǎo)致阻塞等一系列性能問題，如需更好的方案，還是得使用Nginx等反向代理服務(wù)器進(jìn)行端口代理處理。

總結(jié)

本文從實(shí)踐的角度介紹了JSONP和代理服務(wù)器的處理跨域的做法，并對(duì)比了兩種方案的優(yōu)缺點(diǎn)，如果是一些安全要求性不高的場(chǎng)景，可以直接使用JSONP進(jìn)行跨域請(qǐng)求，如果是需要額外的HTTP請(qǐng)求并且安全性要求較高，跨域請(qǐng)求還是從server端發(fā)起為佳，當(dāng)然還有其他跨域方案，需要讀者根據(jù)自身的能力和判斷去舍取。

好了，

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com