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