前端跨域問題總結

    前端 跨域基本有如下解決辦法：

    1.服務器端代理服務：

    JavaScript由於安全機制的問題，禁止我們跨域。因此，我們可以在服務器端通過後端代碼獲得所需的遠程服務器信息，然後前端頁面向本地服務器獲取相關信息。這樣我們就繞過JavaScript的跨域問題了。但這樣做的缺點就是需要寫後端代碼，增加工作量。

    2.JSONP

    我們可能注意到<script>標籤不存在跨域問題，其實一般具有src屬性的標籤都不會遇到跨域問題，比如：script，img和iframe。而JSONP的核心就是動態生成js腳本。如下是Jquery的JSONP例子：

    i).前端JavaScript代碼：

$.ajax({
    url:"你的url",
    dataType:"jsonp",
    jsonp:"callback",                 //傳遞給請求程序或頁面的，用來獲得JSONP回調函數的
    type="GET",                      //請求類型只能是get
    success:function(data){
        console.log(data);
    },
    error:function(err){
        console.log(err);
    }
});

    ii).後端代碼需要獲得callback函數,然後返回字符串，需要和callback函數進行相關的拼接。

    JSONP的方式的缺點就是，前端和後端都需要根據JSONP的方式修改相應的代碼。

    3.HTML5

    HTML5新的標準中增加了“Cross-Orgin Resource Sharing”特性，這個特性的出現使得跨域通信只需要配置http協議頭來解決。

    主要配置如下協議頭：

    Access-Control-Allow-Origin:"你前端請求的頁面url"

    Access-Control-Allow-Method:POST,GET

    Access-Control-Allow-Credentials:true

    這三個協議頭，在不同後端代碼中寫法不同，請使用者自己搜索相關寫法。

    但這種方式跨域的缺點就是IE9以及IE9一下的瀏覽器不支持。

    4.Nginx反向代理跨域

    nginx跨域是我認爲最簡單的方式，不需要改任何代碼，兼容各種瀏覽器，只需要配置一下nginx的配置文件nginx.conf。

     假如我們前端需要跨域的url地址都是以http://ip:port/api/..開頭的。我們在nginx.conf下面增加如下配置：

location /api {
		proxy_pass http://ip:port/api;    #其中ip,port對應自己的服務器端地址
}