爲何瀏覽器不容許Ajax跨域

咱們知道若是你在瀏覽器上打開了一個網頁，而後試着去請求另外一個站點的資源，通常來講，Javascript並不會拿到想要的結果，瀏覽器會在控制檯把提示信息標紅。

那麼瀏覽器爲什麼會這樣作呢？咱們來看一下在瀏覽器不限制跨域的狀況下，用戶的一系列操做可能會發生什麼事情。

首先用戶打開一個在線文件存儲網站http://www.file.com併成功登錄，服務器將登錄憑證寫入cookie並返回到瀏覽器。

而後用戶打開了另外一個網站http://www.hacker.com，可是hacker的網頁中埋了一條發送到file.com的請求，由於瀏覽器訪問file.com，因而剛纔生成的那個cookie就被hacker利用了。hacker發送的請求有多是清空file中的全部文件。然而發生的這一切的過程，用戶並不能感知到。這也是就是CSRF(Cross-site request forgery)跨站請求僞造。

若是確實有跨域需求，CORS(Cross-origin Resource Shearing )跨域資源共享，是個不錯的選擇。只要服務器實現CORS接口，就能夠實現先後端跨域通訊。

Response Header

Access-Control-Allow-Origin: | * origin，參數的值指定了容許訪問該資源的外域URI，若是請求不須要身份憑證，能夠用星號*，全部域均可以請求

Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header XMLHttpRequest對象的getResponseHeader能夠拿到Cache-Control,Content-Language,Content-Type,Expires,Last-Modified,Pragma這些基本頭的其餘自定義頭。

Access-Control-Max-Age， 決定預請求到的結果能夠緩存多長時間

Access-Control-Allow-Credentials， js的請求中，若是credentials:"include", 則瀏覽器會根據這個返回字段決定是否要把服務器的respond返回給前端Javascript，true：返回；false：不返回

Access-Control-Allow-Methods， 跨域容許使用到的方法

Access-Control-Allow-Headers， 規定了跨域時容許攜帶的首部字段。

Request Header

Origin: 說明請求發起的來源

Access-Control-Request-Method 實際請求時，須要使用的方法

Access-Control-Request-Headers 實際跨域請求時，會攜帶的請求頭字段