前言

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

瀏覽器為了保護(hù)用戶安全，引入了同源策略，即一個服務(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ù)器上進(jìn)行添加，如果該服務(wù)器不是自己開發(fā)的話（例如上面提到的豆瓣公開API），這個方法基本可以忽略，那么留給我們自由發(fā)揮的方法就只有JSONP和代理服務(wù)器了。網(wǎng)上有關(guān)于很多JSONP和代理服務(wù)器解決跨域的介紹，但都缺少具體的實踐案例，本文將通過具體的實際案例來了解這兩個跨域方式的具體實現(xiàn)。

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

JSONP

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

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

JSONP的原理就是利用瀏覽器對script標(biāo)簽沒有同源限制，動態(tài)創(chuàng)建script標(biāo)簽，把需要請求的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é)束時調(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)建標(biāo)簽
 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標(biāo)簽，這里類似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的缺點(diǎn)

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

• JSONP是通過script標(biāo)簽獲取資源的，也就是說JSONP注定只能用GET的方式訪問資源，GET以外的請求無法做到；
• JSONP是通過src引用不同源的代碼，如果其他域的代碼存在惡意代碼，那么這將造成嚴(yán)重的網(wǎng)絡(luò)安全，如果需要跨域的服務(wù)器不足以信任，那么必須放棄JSONP；
• 要確定JSONP請求是否成功，需要啟動一個計時器監(jiān)測數(shù)據(jù)變動。

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

代理服務(wù)器

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

首先代理服務(wù)器需要知道瀏覽器頁面需要請求的API，因此，頁面需要把API當(dāng)做參數(shù)傳遞給代理服務(wù)器，形如：/proxy/:api，api參數(shù)是完整的API鏈接，如之前提到的豆瓣公共API：https://api.douban.com/v2/book/1220562。server端對API進(jìn)行轉(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)) ##進(jìn)行一些類型轉(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)點(diǎn)

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

• 資源獲取是通過server端進(jìn)行，可以根據(jù)需要轉(zhuǎn)發(fā)的API選擇使用GET以外的HTTP方法進(jìn)行資源請求；
• 請求的資源需要經(jīng)過server端轉(zhuǎn)發(fā)到瀏覽器端，server端可以對資源進(jìn)行處理，因此可以避免一些直接的惡意代碼，比JSONP更安全；
• 瀏覽器頁面正常使用Ajax請求數(shù)據(jù)，通過回調(diào)可以得知請求是否結(jié)束，不再需要使用計時器監(jiān)測。

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

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

總結(jié)

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

好了，以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

最新評論