什么是跨域？

我們通常所說(shuō)的跨域是狹義的，是由瀏覽器同源策略限制的一類請(qǐng)求場(chǎng)景。所謂同源是指"協(xié)議+域名+端口"三者相同，即便兩個(gè)不同的域名指向同一個(gè)ip地址，也非同源，只要沒(méi)有同時(shí)滿足這三個(gè)條件的請(qǐng)求即為跨域請(qǐng)求，跨域請(qǐng)求控制臺(tái)一般會(huì)出現(xiàn)類似錯(cuò)誤:

XMLHttpRequest cannot load http://xxxxx.php.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://xxx' is therefore not allowed access.

設(shè)置本地跨域

首先我們?cè)诒镜卦O(shè)置本地跨域請(qǐng)求，首先需要安裝wamp服務(wù)器,其默認(rèn)的localhost端口為80，我們找到wamp的安裝路徑，如我的是安裝在D盤，則在D:\wamp\bin\apache \apache2.4.9\conf\中打開httpd.conf文件，在Listen [::0]:80語(yǔ)句下添加Listen [::0]:8011，點(diǎn)擊保存，重啟wamp或Apach，這樣我們就配置了一個(gè)localhost:8011端口。接下來(lái)在wamp\www文件夾中新建test1和test2文件夾，在test1下新建index文件，在test2文件夾下新建index2.php文件。

方法一：

1）test1/index.html文件js代碼如下：

<script>
   $(function(){
        $.ajax( {
            url: "http://localhost:8011/test2/index2.php",
            type: 'get',
           dataType: 'jsonp', // 請(qǐng)求方式為jsonp
           jsonpCallback: "onBack", // 自定義回調(diào)函數(shù)名
           success: function(data){
              console.info(data)
           }
       });
 });
</script>

2）test2/index2.php文件代碼如下：

<?php
     $callback=$_GET['callback'];
     $data=array('a'=>1,'b'=>2,'c'=>3);
     echo $callback.'('.json_encode($data).')';
?>

這樣就可以進(jìn)行ajax訪問(wèn)了。

方法二：

1）test1/index.html文件js代碼如下：

<script>
  function dosomething(jsondata){
        console.log(jsondata)
  }
</script>
<script src="http://localhost:8011/test2/index2.php?callback=dosomething"></script>

2）test2/index2.php文件代碼同方法一的test2/index2.php

這樣第二種方法也ok

方法三：

1）test1/index.html文件js代碼如下：

$.ajax({
     url: 'http://localhost:8011/test2/index2.php?callback=myFunction',
     type: 'get',
     data: {},
     success: function(json){
     console.log(json)
     },
     error: function(){
     alert('fail');
     }
 });

2）test2/index2.php文件代碼：

<?php
     header('Access-Control-Allow-Origin:*');
     $callback=$_GET['callback'];
     $data=array('a'=>1,'b'=>2,'c'=>3);
     echo $callback.'('.json_encode($data).')';
?>

這樣第三種方法也行啦

請(qǐng)求方式：

1）在html的ajax請(qǐng)求中dataType: 'jsonp',這句是關(guān)鍵，沒(méi)有這句就沒(méi)法進(jìn)行ajax請(qǐng)求。這也就是jsonp的跨域請(qǐng)求方式。缺點(diǎn)就是只能通過(guò)GET的請(qǐng)求方法，不能用POST。

2）第二種方法是利用script的src不受同源限制，進(jìn)行的方法回調(diào)進(jìn)行跨域請(qǐng)求。

3）第三種方法是跨域資源共享（CORS），通過(guò)在請(qǐng)求文件添加header('Access-Control-Allow-Origin:*');[//指定允許其他域名訪問(wèn)]實(shí)現(xiàn)跨域的，可以多種請(qǐng)求方法。

4）還有其他的方法，這邊就不一 一講述啦