Ajax跨域CORS

在Ajax2.0中多了CORS容許咱們跨域，可是其中有着幾種的限制：Origin、Methods、Headers、Credentials

1.Origin

當瀏覽器用Ajax跨域請求的時候，會帶上一個請求頭「Origin: 協議://頁面域名」,而服務器須要返回一個響應頭「Access-Control-Allow-Origin: 協議://對應域名「，若是Origin和Access-Control-Allow-Origin不一樣，瀏覽器就會報錯，服務器返回的信息也會被瀏覽器禁止使用

 

2.Methods

默認容許跨域的方法只有三種：GET、POST和HEAD

不少時候咱們會用到一些Resful接口，method會涉及到PUT、DELETE等等，這個時候CORS要求服務器增長響應頭」Access-Control-Allow-Methods: PUT,DELETE「

 

3.Headers

CORS默認有些請求頭是不容許的例如自定義請求頭 和 content-type

若是咱們遇到一些狀況須要增長一些自定義的請求頭，CORS要求服務器增長響應頭」Access-Control-Allow-Headers: 自定義請求頭,content-type「

 

4.credentials

CORS默認是不容許跨域發送COOKIES

若是咱們想跨域發送COOKIES，咱們須要在前端頁面設置xhr.withCredentials=true，服務器增長響應頭」Access-Control-Allow-Credentials: true「

 

瀏覽器表現的差別

1. 當跨域請求是"非簡單請求"的時候(詳情看阮老師的文章)，瀏覽器會先發送一個 OPTIONS "預檢"請求，新版 Chrome 已經不會發了，Firefox 仍是會發 OPTIONS

2. 上面 4 中 Access-Control-Allow-xxx Chrome 都兼容 星號(*)，可是 Firefox 只容許 Origin 寫 星號(*)。