同源策略/SOP(Same origin policy)是一種約定,由Netscape公司1995年引入瀏覽器,它是瀏覽器最核心也最基本的安全功能,如果缺少了同源策略,瀏覽器很容易受到XSS、CSFR等攻擊。所謂同源是指"協(xié)議+域名+端口"三者相同,即便兩個(gè)不同的域名指向同一個(gè)ip地址,也非同源。
由于瀏覽器的 同源策略 ,前端請(qǐng)求不同源(協(xié)議、端口、域名不同)的接口時(shí)會(huì)被攔截。
http://www.a.com向http://www.b.com發(fā)送請(qǐng)求。
由于域名不同,瀏覽器會(huì)攔截a域名向b域名的請(qǐng)求。
在開發(fā)者工具的Network中可以看到,向b服務(wù)器的請(qǐng)求能發(fā)送成功并收到請(qǐng)求結(jié)果
但在js中是無法對(duì)請(qǐng)求后的結(jié)果做處理,而且Console中也能看到該請(qǐng)求的錯(cuò)誤信息
上面例子中無法處理請(qǐng)求結(jié)果和console展示的錯(cuò)誤信息就是 同源策略 導(dǎo)致的。
而現(xiàn)在非常流行的前后端分離的開發(fā)方式,很多情況下前端頁(yè)面和后端API都會(huì)是不同的域名指向。這就肯定會(huì)涉及到 同源策略 導(dǎo)致的請(qǐng)求結(jié)果無法處理。這里說一下通過在PHP下配置的方式來解決這個(gè)問題。
通過觀察 Console 中的報(bào)錯(cuò)信息能比較容易的解決跨域問題。
在響應(yīng)頭中設(shè)置 Access-Control-Allow-Origin ,表示允許哪些域名的腳本訪問該資源。
//表示允許所有域名的腳本訪問該資源。
Access-Control-Allow-Origin:*
//表示允許http://www.b.com域名下的腳本訪問該資源。
Access-Control-Allow-Origin:http://www.b.com
有時(shí)候不單只需要設(shè)置允許的域名,還需要設(shè)置允許的 HTTP請(qǐng)求方式
Access-Control-Allow-Methods:POST,GET,PUT,DELETE,OPTIONS
設(shè)置請(qǐng)求頭中允許的自定義參數(shù)
//表示允許請(qǐng)求頭中加入 Authorization 參數(shù)
Access-Control-Allow-Headers:Authorization
參考:https://segmentfault.com/a/1190000011145364#articleheader0