關於AJAX的跨域問題

最近過年的這幾天在作畢業設計的時候遇到了一個關於AJAX的跨域問題，原本我是想要用一下聚合數據平臺提供的天氣預報的接口的，而後作一個當地的天氣狀況展現，可是在使用AJAX的時候，被告知出現錯誤了。

這是因爲瀏覽器的同源策略引發的，那麼什麼是同源策略呢，同源策略就是在不一樣域下請求另外一個頁面中的數據時，這是不被容許的。也就是會出現上面的問題。

那麼什麼是不一樣域呢。一個域名地址的組成有如下幾個部分：協議、子域名、主域名、端口號、請求資源地址。

例如：http://www.abc.com:8080/server.php/這個域名地址。

這裏的http://就是協議。

www就是子域名

abc.com就是主域名

8080就是端口號

server.php就是請求資源地址

只要以上的協議、子域名、主域名、端口號有一個不一樣，就算作不一樣域。不一樣域之間的互相請求資源就是跨域請求。那麼怎麼來解決這個跨域問題呢？，這裏我收集了三個方法，分別是利用代理、jsonp、xhr2。

一、使用代理：由於我這裏使用的後臺語言是php，因此我這裏就只是找到了php相關的代碼。

<?php
    header('Content-type:application/json;charset=utf-8');
    function GetCurl($url){
        $curl = curl_init();
        curl_setopt($curl,CURLOPT_RETURNTRANSFER,1);
        curl_setopt($curl,CURLOPT_URL, $url);
        curl_setopt($curl,CURLOPT_USERAGENT, $_SERVER['HTTP_USER_AGENT']);
        $resp = curl_exec($curl);
        curl_close($curl);
        return $resp;
    }
    $resp = GetCurl("http://op.juhe.cn/onebox/weather/query?cityname=成都&key=ecf1aeb200fe2eb300a68a4e5a1a0d46");
    $resp = json_decode($resp,true);
    echo json_encode($resp);
?>

二、使用jsonp，說道jsonp就不得不說下json了，他是一種輕量級的數據交換格式，它採用了徹底獨立於語言的文本格式，也就是說不管是任何語言均可以解析json數據，只要按照json的規則來就行。那麼json的大概的結構以下：

{
    "user": [{
        "name": "張三",
        "age": 20,
        "sex": "male"
    }, {
        "name": "李四",
        "age": 25,
        "sex": "male"
    }, {
        "name": "翠花",
        "age": 18,
        "sex": "female"
    }]
}

那麼什麼是jsonp呢，jsonp是一種json的使用模式，他就是爲了解決各大主流瀏覽器之間的跨域問題而出現的，使用jsonp所抓取的並非json，而是任意的JavaScript代碼，而後利用JavaScript直譯器執行而不是利用json解析器解析。

$.ajax({
            type:'GET',
            url:"http://op.juhe.cn/onebox/weather/query?cityname=成都&key=ecf1aeb200fe2eb300a68a4e5a1a0d46",
            dataType:'jsonp',
            jsonp:'callback',
            success:function(data){
                console.log(data);
            }
        });

三、使用xhr2，這裏的xhr2是HTML5提出的新功能，XMLHttPRequest Level2已經實現了各大瀏覽器之間的跨域問題、可是在IE10如下的版本都不被支持。使用這個方法解決跨域問題很簡單，只須要在服務器頁面添加兩行代碼就OK。

後臺php代碼：

<?php
header('Content-type:application/json;charset=utf-8');
header('Access-Control-Allow-Origin:*');//這裏的*表示全部的域均可以訪問。這下面兩句就是須要在服務器頁面添加的代碼。
header('Access-Control-Allow-Methods:POST,GET');
$arr=array(
    array('name'=>'張三','age'=>24,'sex'=>'male'),
    array('name'=>'李四','age'=>22,'sex'=>'male'),
    array('name'=>'翠花','age'=>20,'sex'=>'female')
);
echo json_encode($arr);
?>

前端代碼：

$.get('http://127.0.0.1/AJAX/xhr2.php',function(data){
    console.log(data);
});

瀏覽器控制檯輸出結果：

好了以上就是我找到的解決ajax跨域問題的方法，今天就先寫到這裏。