1.同源策略

同源策略是瀏覽器的一種安全策略,是指協(xié)議、域名、端口號(hào)完全相同.
同源策略要求一個(gè)網(wǎng)站不能調(diào)用其他網(wǎng)站的js對(duì)象

2.跨域

構(gòu)成跨域的條件就是一個(gè)頁(yè)面只要協(xié)議、域名、端口號(hào)中只要有一個(gè)與另一個(gè)頁(yè)面不同就構(gòu)成了跨域請(qǐng)求

同源跨域.png

特別注意兩點(diǎn)：

第一：如果是協(xié)議和端口造成的跨域問(wèn)題“前臺(tái)”是無(wú)能為力的
第二：在跨域問(wèn)題上，域僅僅是通過(guò)“URL的首部”來(lái)識(shí)別而不會(huì)根據(jù)域名對(duì)應(yīng)的IP地址是否相同來(lái)判斷?！癠RL的首部”可以理解為“協(xié)議, 域名 和 端口 必須匹配”。

解決跨域請(qǐng)求的方案:

jsonP:

情景：網(wǎng)站http://localhost:63342/ 頁(yè)面要請(qǐng)求http://localhost:3000/users/userlist 頁(yè)面，userlist頁(yè)面返回json字符串格，如下圖：

Paste_Image.png

端口號(hào)為63342網(wǎng)站的一個(gè)頁(yè)面index.html通過(guò)ajax請(qǐng)求url http://localhost:3000/users/userlist ，這個(gè)明顯的出現(xiàn)了跨域請(qǐng)求，因?yàn)槎丝谔?hào)不一樣。請(qǐng)求時(shí)發(fā)生的錯(cuò)誤如下：

Paste_Image.png

解決方式，采用JSONP方式來(lái)請(qǐng)求index.html

<script>  
    $.ajax({  
        url:"http://localhost:3000/users/userlist",  
        type:"get",  
        dataType:"jsonp",  
        success:function(e){  
            console.log(e);  
        }  
    });  
</script>

Node.js 服務(wù)器代碼

router.get("/userlist", function (req, res, next) {  
    var callback=req.query["callback"];  
    var user = {name: 'Mr.Cao', gender: 'male', career: 'IT Education'};  
    res.write(callback+"("+ JSON.stringify(user)+")");  
    res.end();  
}); 

成功請(qǐng)求的結(jié)果

Paste_Image.png

缺點(diǎn)：
1、這種方式無(wú)法發(fā)送post請(qǐng)求
優(yōu)點(diǎn):
1.使用比較方便
2.很多大型的網(wǎng)站也是采用這種方式