前言：上一篇文章在寫如何使用JSONP實現跨域請求的時候，偶然間提到CORS，即Cross-Origin Resource Sharing（跨域資源共享）。雖然前些天也看了一下CORS相關的文章，但是今天興趣一來還是親自地寫篇博客來研究一下吧。如果是關于技術的資料，我還是比較喜歡看維基百科。至于百度百科，平常查查生活資料還行。讓我們先看看比較官方的名詞解釋吧，請不要吐槽我的翻譯(⊙o⊙)…。

解釋：

　　Cross-origin resource sharing?(CORS) is a mechanism that allows restricted resources (e.g. fonts,?JavaScript, etc.) on a?web page?to be requested from another?domain?outside the domain from which the resource originated.^[1]

A web page may freely embed images,?stylesheets, scripts,?iframes, videos and some plugin content (such as?Adobe Flash) from any other domain. However embeddedweb fonts?and?AJAX?(XMLHttpRequest) requests have traditionally been limited to accessing the same domain as the parent web page (as per the?same-origin security policy). "Cross-domain" AJAX requests are forbidden by default because of their ability to perform advanced requests (POST, PUT, DELETE and other types of?HTTP requests, along with specifying custom?HTTP headers) that introduce many?cross-site scripting?security issues.

CORS defines a way in which a browser and server can interact to safely determine whether or not to allow the cross-origin request.^[2]?It allows for more freedom and functionality than purely same-origin requests, but is more secure than simply allowing all cross-origin requests. It is a recommended standard of theW3C.^[3]

原文解釋來自維基百科

我的翻譯：

　　跨域資源共享是一個允許網頁上受限制的資源（如字體，JavaScript等）向本域名同源資源外的其他域名請求的機制。

　　一個網頁也許能隨意地嵌入任何一個域名中的圖片、樣式、腳步、框架、視頻和一些插件（例如Adobe Flash）等內容。但是嵌入的網絡字體和AJAX請求在傳統上被限制于只能在主頁的同一域名下訪問（按照同源安全政策）。跨域的AJAX請求默認是被禁止的，因為它們能連同指定的自定義HTTP請求頭，一起執行會帶來很多跨域腳步安全問題的高級請求（如POST,PUT,DELETE和其他類型的HTTP請求）。

　　CORS規定了一種方法，通過這種方法瀏覽器和服務器之間能夠安全地決定是否允許跨域請求。它比單純的同源請求給予了更大的自由度以及功用性，但不是簡單的允許所有跨域請求會更安全一些。這是W3C的一個推薦標準。

?實現：

　　訪問方法：在服務端使用'Access-Control-Allow-Origin' header進行配置。

　　以下客戶端以AJAX為例，服務端以PHP為例.

　　本機域名1：http://www.chengguanhui.com，本機域名2：http://www.goingic.com，請求域名是：http://www.happywzq.com。

 1 var main = document.getElementById("main");2         var btn = document.getElementById("btn");3         var ajax = new XMLHttpRequest();4         btn.onclick = function(){    5             ajax.onreadystatechange=function()6                   {7                   if (ajax.readyState==4 && ajax.status==200){8                        main.innerHTML=ajax.responseText;9                 }
10             }
11         ajax.open("POST","http://www.happywzq.com/xiaohui/index.php",true);
12         ajax.send();
13         }

1 <?php 
2     //header("Access-Control-Allow-Origin:*");
3     header("Content-type:text/html;charset=utf-8");
4     echo "我在測試CORS!";
5  ?>

　　情景一：不加Access-Control-Allow-Origin文件頭。

圖一為跨域訪問，圖二為本域訪問。結果很明顯，不設置允許訪問源時，其他域名是無法請求的，在當前域名下的文件成功訪問。

---

?

　　情景二：將PHP注釋去掉，添加Access-Control-Allow-Origin：*文件頭，開放任意域名（不建議使用這種方式）。

結果是，我這邊的兩個主機的域名都能向happywzq下的文件發起請求，并成功返回文本。

---

?

　　情景三：將PHP允許源文件頭改為'Access-Control-Allow-Origin：http://www.chengguanhui.com'，即只對我的域名允許請求。

結果很明顯，用我的域名1時可以訪問，但用域名2時就請求不了，無法返回數據了。

兼容性：

　　在兼容性方面，CORS在IE9+，FF3.5+，Safari4.0+等瀏覽器上表現良好。以下這張圖是從別的地方拿過來的（如有侵權本人立即刪除并公開致歉），但是我測試了一下IE6跟IE8，結果均沒有任何反應，且沒報錯。至于IE8，網上有人說可以實現CORS，但是寫法不一樣。這個暫時沒有研究過，可能是所謂的部分支持，又或許需要寫兼容吧。好了，時間關系，先回家吃飯了，明天再測試IE8的情況吧。

圖為各瀏覽器對于CORS的支持情況，圖片來源：蔣宇捷，數據來源：http://caniuse.com/cors。

?

轉載于:https://www.cnblogs.com/qilinge/p/4963080.html

總結

以上是生活随笔為你收集整理的转 小辉_Ray CORS（跨域资源共享）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。