標籤：jsonp access-control-allow-origin
在認識 跨域 之前，先簡單瞭解下網域名稱和協議名，比如下面這個 URL
http://mail.163.com/index.html
http:// 協議名，也就是HTTP超文字傳輸通訊協定 (HTTP)
mail 伺服器名
163.com 網域名稱
mail.163.com 網站名
/ 根目錄
index.html 根目錄下的預設網頁
1、什麼是跨域請求？
請求的下一個資源所在的 協議、網域名稱、連接埠號碼 三者之一與當前資源不一致就稱為 跨域請求
簡單理解，就是 $.get(url, [data], [callback], [type]) 裡面的 url 的協議名、網域名稱 或者 連接埠號碼與當前網域名稱不一樣
650) this.width=650;" src="http://s5.51cto.com/wyfs02/M00/8A/B7/wKioL1g5N-zTVqHEAAEcMLjJtAQ988.png" title="QQ20161126152045.png" alt="wKioL1g5N-zTVqHEAAEcMLjJtAQ988.png" />
為了避免晦澀難懂的文字，我們直接上一個小 demo：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><h2>非跨域請求</h2><button id="btn1">非跨域按鈕</button><h2>跨域請求</h2><button id="btn2">跨域按鈕</button><script src="//cdn.bootcss.com/jquery/3.1.1/jquery.js"></script><script> $(‘#btn1‘).click(function(obj){ $.get(‘http://localhost:8081/Ajax/2.php‘,function(){ console.log(‘btn1被單擊後發起的XHR請求‘); console.log(obj); }) }) $(‘#btn2‘).click(function(obj){ $.get(‘http://dapengtalk.blog.51cto.com/‘,function(){ console.log(‘btn2被單擊後發起的XHR請求‘); console.log(obj); }) })</script></body></html>
在瀏覽器地址欄輸入“http://localhost:8081/Ajax/cross.html”開啟頁面，點擊“非跨域按鈕”，查看控制台
650) this.width=650;" src="http://s1.51cto.com/wyfs02/M01/8A/B7/wKioL1g5ONjhojfSAABrX20sP0s236.png" title="QQ20161126152346.png" alt="wKioL1g5ONjhojfSAABrX20sP0s236.png" />
開啟“Network”
650) this.width=650;" src="http://s1.51cto.com/wyfs02/M02/8A/B7/wKioL1g5OUjx4MpyAACnvZ9R5Ks266.png" title="QQ20161126152629.png" alt="wKioL1g5OUjx4MpyAACnvZ9R5Ks266.png" />---------------------------------------------------------------------------------------------------------
點擊“跨域按鈕”，查看控制台，發現 XHR請求失敗了，很明顯，請求的網域名稱不同，這就是典型的跨域
650) this.width=650;" src="http://s3.51cto.com/wyfs02/M00/8A/BB/wKiom1g5OaqQdgXYAABl8WynHKU160.png" title="QQ20161126152826.png" alt="wKiom1g5OaqQdgXYAABl8WynHKU160.png" />
2、瀏覽器允許 跨域請求嗎？
允許：<img src="跨域的圖片">
允許：<link rel="stylesheet" href="跨域的CSS">
允許：<a src="跨域的連結">
允許：<script src="跨域的JS">
禁止：AJAX請求是不允許跨域的！
說明：出於安全考慮，所有的瀏覽器預設都禁止使用XHR非同步跨域請求。
舉個例子，比如上面提到的 img 允許跨域
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" alt="百度logo"></body></html>
650) this.width=650;" src="http://s5.51cto.com/wyfs02/M02/8A/B7/wKioL1g5PJuTQJtAAADSp6mQS7I031.png" title="QQ20161126153942.png" alt="wKioL1g5PJuTQJtAAADSp6mQS7I031.png" />
不同協議名、不同網域名稱，網頁正常顯示圖片，說明允許跨域。但是文章一開始的 demo 中，使用 Ajax 發起非同步請求的時候，卻是不被允許的。那該怎麼辦呢？
3、跨域 解決方案
3-1、設定“Access-Control-Allow-Origin”頭部
還記得嗎？網域名稱和網域名稱對應的ip 也是不允許跨域的，在此基礎上，我們把上面的例子稍作修改：
(儘管是同一個 2.php 頁面，但一個是網域名稱，一個是網域名稱對應的ip)
HTML代碼：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><h2>非跨域請求</h2><button id="btn1">非跨域按鈕</button><h2>跨域請求</h2><button id="btn2">跨域按鈕</button><script src="//cdn.bootcss.com/jquery/3.1.1/jquery.js"></script><script> $(‘#btn1‘).click(function(obj){ $.get(‘http://localhost:8081/Ajax/2.php‘,function(){ console.log(‘btn1被單擊後發起的XHR請求‘); console.log(obj); }) }) $(‘#btn2‘).click(function(obj){ $.get(‘http://127.0.0.1:8081/Ajax/2.php‘,function(){ console.log(‘btn2被單擊後發起的XHR請求‘); console.log(obj); }) })</script></body></html>
PHP代碼：
<?phpheader(‘Content-Type: application/json; charset=utf8‘);$data = [‘uname‘=>‘Tom‘,‘age‘=>20];echo json_encode($data);
點擊“非跨域按鈕“，可以正常發起 Ajax 請求
650) this.width=650;" src="http://s5.51cto.com/wyfs02/M00/8A/BC/wKiom1g5RI6Bg1jdAABrX20sP0s426.png" title="QQ20161126152346.png" alt="wKiom1g5RI6Bg1jdAABrX20sP0s426.png" />
點擊“跨域按鈕”，報錯了，說明這個屬於 跨域
650) this.width=650;" src="http://s4.51cto.com/wyfs02/M01/8A/B7/wKioL1g5RRyBQ_HWAAChFAkCKSg589.png" title="QQ20161126161712.png" alt="wKioL1g5RRyBQ_HWAAChFAkCKSg589.png" />
按照控制台給出的提示，我們在 php 頁面中設定 Access-Control-Allow-Origin 頭部
PHP代碼：
<?phpheader(‘Content-Type: application/json; charset=utf8‘);// 指定允許其他網域名稱訪問 header(‘Access-Control-Allow-Origin:*‘); $data = [‘uname‘=>‘Tom‘,‘age‘=>20];echo json_encode($data);
看到 btn2，真是太難得了，這個也就說明 設定 Access-Control-Allow-Origin 頭部 是可以解決跨域的
650) this.width=650;" src="http://s4.51cto.com/wyfs02/M02/8A/BC/wKiom1g5RfjgHoixAACdP89SQC4466.png" title="QQ20161126162002.png" alt="wKiom1g5RfjgHoixAACdP89SQC4466.png" />
本文出自 “dapengtalk” 部落格，請務必保留此出處http://dapengtalk.blog.51cto.com/11549574/1876874
Ajax 跨域請求-- Cross Domain
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
