跨域
跨越 區(qū)域(范圍)
瀏覽器為保證數(shù)據(jù)安全 設(shè)立了一種安全策略 —— 同源策略
同源策略的核心思想是 一個(gè)頁面無法訪問跨源(域)的數(shù)據(jù)
1.Cookie 督弓、LocalStorage 和 IndexDB 無法讀取
2.Dom 和 JS 對象無法獲取
3.Ajax請求發(fā)送不出去
同源：有三個(gè)條件需要同時(shí)滿足 才叫同源
- 相同的協(xié)議 ( http:// https:// )
- 相同地址(ip / 域名)
- 相同端口
跨源(跨域)解決方案
- JSONP
//原生的實(shí)現(xiàn)方式
let script = document.createElement('script');
script.src = 'http://www.xxxx.com'
document.body.appendChild('script')
function callback(res) {
console.log(res)
}
- 跨域資源共享(CORS) 是一個(gè)W3C標(biāo)準(zhǔn)，全稱（Cross-origin resource sharing）,她是允許瀏覽器向跨源服務(wù)器，發(fā)出XMLHttpRequest請求昆箕，從而克服了AJAX只能同源使用的限制。
1、請求方式為HEAD、POST 或者GET
2屯换、http頭信息不超出以下字段：Accept、
- 反向代理 使用代理 使用web服務(wù)器代理請求地址
devServer:{
proxy:{
"/api" : {
target:'http://192.168.50.127:8082',
changeOrigin:true,
pathRewrite:{
['^' + '/api'] : ''
}
}
}
}
JSONP和JSON 沒有關(guān)系
JSONP是一種社區(qū)跨域解決方案(不屬于語言標(biāo)準(zhǔn))
JSONP不屬于任何標(biāo)準(zhǔn) 依賴某些可以跨域的屬性實(shí)現(xiàn)功能
JSONP實(shí)現(xiàn)跨域的核心思路是：
動態(tài)的創(chuàng)建script元素 將需要請求的路徑寫在src屬性中
利用src屬性不受同源策略限制的特點(diǎn)發(fā)送get請求
請求的結(jié)果會被瀏覽器識別是js代碼 執(zhí)行得到結(jié)果
src屬性不受同源策略的限制：可以使用帶有src屬性的元素來發(fā)送請求 請求的類型get
例如：
<img src="">
<iframe src="">
<script src=""></script>
