利用jsonp與代理服務器方案解決跨域問題

前言

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

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

在實際開發中，如果遇到這樣的跨域問題，可以通過以下辦法獲得跨域的數據：

對于第一種設置Access-Control-Allow-Origin的方法，如果在Python Flask搭建的服務器下，可以設置一個簡單的修飾器：

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搭建的服務器中，類似的可以加入這樣一個中間件:

//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();
 }
});

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

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

JSONP

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

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

JSONP的原理就是利用瀏覽器對script標簽沒有同源限制，動態創建script標簽，把需要請求的API放在script標簽的src不受同源策略限制的特性來獲得數據。

JSONP由回調函數(callback)和返回的數據(response)兩部分組成。回調函數(callback)是當script創建src引入資源結束時調用，返回的數據(response)作為回調函數的第一個參數傳入，在回調函數里即可保存獲得的不同源數據。具體來看例子，我們在頁面加載的時候獲取數據，請求https://api.douban.com/v2/book/1220562：

// 在vue中需要將回調函數作為一個全局函數，否則在vue的生命周期中將獲取不到這個回調函數
var d = null;
function handleResponse(response){
 console.log(response);
 d = response;
}

compiled: function() {
 var self = this;
 // jsonp
 var script = document.createElement("script"); // 動態創建標簽
 script.src = "https://api.douban.com/v2/book/1220562?callback=handleResponse"; // 創建的src就是請求的API，同時需要給這個src加上一個callback的query參數，參數名字就是你的回調函數名字
 document.body.appendChild(script, document.body.firstChild); // 插入新創建的script標簽，這里類似Ajax發起請求
 
 // 輪詢資源獲取是否結束
 var timer = setInterval(function () {
 if (d) {
 console.log('pending')
 clearInterval(timer);
 self.data = d； // 將獲取的數據賦值給數據model中
 }
 }, 500);
}

此時刷新頁面，瀏覽器不再發出Access-Control-Allow-Origin的跨域錯誤，輸出通過script獲取到的數據:

JSONP的缺點

JSONP的缺點主要源自他的script引用資源方式，JSONP的缺點如下：

針對以上JSONP的缺點，如果需要進行改進，就需要使用代理服務器了。

代理服務器

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

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

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

 return json.dumps(conver_r), 200

在瀏覽器端發起請求的具體代碼為：

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

此時打開瀏覽器控制臺，可以看到server轉發的請求結果，跨域成功。

與JSONP相比代理服務器的優點

相比JSONP，使用代理服務器轉發不同源API的優點如下：

代理服務器的缺點

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

總結

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

好了，

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com