快速解決跨域問題，讓你的應用程序更加流暢

一、什麼是跨域問題

在介紹如何解決跨域問題之前，我們需要明確什麼是跨域問題。簡單來說，當一個網頁從一個域名（網址）的文檔或腳本向另一個域名的資源請求時，就會出現跨域問題。這是因為瀏覽器出於安全方面的考慮，會限制腳本內發起跨域的http請求。而跨域的請求方法包括Ajax、WebSocket、PostMessage等。

一般而言，若兩個域名不同，則被認為是跨域請求，如從 http://www.domain1.com/index.html 調用 http://www.domain2.com/index.php 。

跨域問題造成了很多方面的不便，比如網頁不能正常獲取跨域的資源，也不能與其他域名下的網頁進行數據交互等。

二、跨域解決方案

1、JSONP

JSONP是一種解決跨域的常用方式。它是利用了script標籤的跨域性質來實現的。當需要跨域請求時，對方網站在服務端將數據封裝成一個函數，然後把這個函數名通過url傳遞給調用方，在調用方的script標籤內以src引用方式調用對方的介面地址。在1.8以上的jQuery版本，跨域的jsonp請求方式可以通過設置$.ajax的dataType屬性為jsonp實現。

$.ajax({
  url: "http://www.domain2.com/data.php?callback=?",  
  dataType: "jsonp",  
  ...
}); 

2、CORS（跨域資源共享）

CORS是W3C標準推薦的一種解決跨域問題的方式。當一個網站需要調用另一個域名下的資源時，CORS會自動向請求頭添加一組信息，與對於介面的訪問方進行溝通，在伺服器對請求作處理之前，能夠讓請求發起方得到響應信息的允許信息。如果介面提供方允許該請求，則能夠順利完成請求，否則返回錯誤信息。需要注意的是，為了能夠實現CORS請求，伺服器端需要進行一定的設置。

//設置CORS
header("Access-Control-Allow-Origin:*");    //允許任何來源訪問
header("Access-Control-Allow-Methods:POST,GET,OPTIONS");   //允許請求的方法
header("Access-Control-Allow-Headers:Authorization,Origin, X-Requested-With, Content-Type, Accept"); //允許的請求header

3、代理轉發

代理轉發是一種讓後端服務端請求跨域請求，在前端進行數據交互的方式。其主要思路是前端向自己的伺服器發起請求，然後自己的伺服器充當中間層，將請求發到要訪問的地址，並將得到的內容返回給前端。這種方式需要前端和後端配合，除了解決跨域問題，也能夠實現一定的安全性防護。

//前端代碼
$.ajax({
    type: "POST",
    url: "/api",
    data: { url: "http://www.domain2.com/server.php" },
    dataType: "json",
    success: function (data) {
        console.log(data);
    }
});

//後端代碼
headers = {
    'Accept': 'application/json, text/javascript, */*;',
    'Accept-Encoding': 'gzip',
    'Accept-Language': 'zh-CN,zh;q=0.9',
    'Connection': 'keep-alive',
    'Content-Length': '0',
    'Host': 'www.domain2.com',
    'Origin': 'http://www.domain1.com',
    'Referer': 'http://www.domain1.com/index.html',
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3'
}
@app.route('/api', methods=['POST'])
def api():
    url = request.form.get('url')
    r = requests.get(url, headers=headers)
    return r.text

三、總結

無論是JSONP、CORS還是代理轉發，每種跨域解決方案都有其各自的優劣。JSONP是一種通用的解決方案，但是只能針對get請求，存在一定的安全隱患；CORS兼容性良好，能夠支持post等多種請求方式，同時也存在一定的缺點，因為需要伺服器在響應頭中進行設置，並不能直接控制，而且存在兼容性不好的客戶端情況；代理轉發是一種在後端處理的方案，可以對請求進行一定的安全防護，同時請求方式可以更加靈活。需要根據實際情況選擇合適的跨域解決方案。