什么是跨域
首先說一下同源：同源就是規(guī)定多個web資源的url中的scheme（協(xié)議）嚷硫、hostname(域名）检访、port（端口）始鱼、必須相同，
只要有一項不同那么這個web資源就是不同源 的脆贵。
當請求地址與源頁面地址不同源時医清，就產(chǎn)生跨域現(xiàn)象。
同源策略就是規(guī)定了javascript可以操作那些web內(nèi)容的一個完整的安全限制卖氨。
同源策略限制的內(nèi)容有：
- cookie LocalStorage IndexDB
- dom 節(jié)點
- ajax請求
跨域加載標簽 src href屬性都可以跨域加載資源会烙。
解決方案：
jsonp
jsonp
原理：
- script元素可以作為一種Ajax傳輸協(xié)議
- 利用srcript標簽不受同源策略限制，網(wǎng)頁可以從其他源獲取json數(shù)據(jù)（服務器支持才可以）
- 只需設置script元素的src屬性并且插入到DOM中筒捺，瀏覽器就會發(fā)出一個HTTP請求到src屬性指向所指向的URL
- script 元素會自動下載并執(zhí)行下載的數(shù)據(jù)
- 使用這種script元素進行ajax數(shù)據(jù)傳輸?shù)募夹g就叫做jsonp，也就是JSON-Padding
服務器會返回一個這樣的相應
// functionName(["baidu", "tencent", "alibaba"])
以前就知道利用src屬性不受同源策略影響系吭，現(xiàn)在直接貼代碼一目了然
優(yōu)缺點
優(yōu)點：簡單兼容性好
缺點：只支持get方式，不安全肯尺，可能遭受xss攻擊
這次終于搞懂jsonp的實現(xiàn)形式了
后端代碼使用及其簡單 node - express
let express = require(''express)
let app = express()
app.get('/say', function(req, res){
let { callback } = req.query
// 向前端發(fā)送js代碼，讓前端直接執(zhí)行掉
res.end(`${callback}('me too')`)
})
app.listen(3000)
前端代碼
前端項目中直接打開或者使用live-server啟動一個服務则吟，目的就是前后端不同源槐臀，以便使用jsonp實現(xiàn)跨域獲取數(shù)據(jù)
function jsonp({url, callback})
return new Promise((resolve, reject) => {
window[callback] = functioin(data) {
resolve(data)
}
script.src = url + '?callback' + '=' callback
document.body.appendChild(script)
})
// jsonp成功實現(xiàn)跨域
jsonp({
url: 'http://localhost:3000/say'
callback: 'show'
}).then(data => {
console.log(data) // me too 拿到數(shù)據(jù)
})
