一. 跨域的概念
同一時間，一個頁面存在訪問多個主機的情況，且每個主機之間，協議，主機，埠其中之一不相同，
同源策略：
兩個主機，如果是協議，主機或域名，埠，其中之一不一樣，就違反了同源策略
同源策略的限制:
- 不能發送ajax請求
- 不能跨域操作DOM等
- 不能跨域操作本地存盤(cookie,localstorage,sessionstorage)
同源策略的產生最初是為了預防XSS和CSRF跨域腳本攻擊，
二.跨域請求分類
1.簡單跨域請求
- ? 請求型別：只支持GET,HEAD,POST
- ? 內容型別: x-www-urlencode,form-data,text/plain
- ? 請求只發一次
2.非簡單跨域請求，范圍比簡單跨域請求更大
- ? 請求型別都支持
- ? 內容型別都支持
- ? 請求發兩次，第一次是OPTIONS型別的請求，用于驗證服務端是否允許跨域，如果允許，再發第二個請求，第二次就會發送資料，
三.JSONP方式解決跨域問題
client客戶端:
<script>
//;handlejsonp({"name":"jsonp"})
function handlejsonp(data){
console.log(data);
}
</script>
<script
type="text/javascript"
src="http://localhost:3000/jsonp?callback=handlejsonp">
</script>
api服務端:
router.get('/jsonp', async (ctx, next) => {
let cb = ctx.query.callback||"callback";
let param = {name:"jsonp"};
//";"+cb+JSON.stringify(param);
//模板字串
let jp = `;${cb}(${JSON.stringify(param)})`;
//設定回應頭，告訴瀏覽器這是一個js腳本內容
ctx.type="text/javascript"
ctx.body = jp;
})
四.CORS解決方案
CORS跨域資源共享，只需要在后端設定3個基本回應頭，就可以允許跨域
客戶端:
<script>
//發送簡單請求
function sendEasyAjax(){
let req = new XMLHttpRequest();
req.open("GET","http://localhost:3000/json");
req.onreadystatechange=function(){
if(req.status==200&&req.readyState==4){
console.log(req.responseText);
}
}
req.send();
}
sendAjax();
//發送非簡單請求
function sendAjax(){
let req = new XMLHttpRequest();
req.open("POST","http://localhost:3000/noeasy");
req.onreadystatechange=function(){
if(req.status==200&&req.readyState==4){
console.log(req.responseText);
}
}
let jsonParam =
JSON.stringify({"classname":"jy001","classcount":36});
req.send(jsonParam);
}
</script>
服務端只需要在app.js入口檔案中設定:
app.use(async (ctx, next) => {
ctx.set("Access-Control-Allow-Origin","*");
ctx.set("Access-Control-Allow-Headers","Content-Type,Authorization");
ctx.set("Access-Control-Allow-Methods","OPTIONS,GET,POST");
//對OPTIONS型別的請求，直接回傳成功狀態即可，
//因為它只是用于驗證是否支持跨域
if(ctx.method=="OPTIONS"){
ctx.status=200;
return;
}
//記得加上next()否則請求流程會中斷
await next();
})最后
如果對您有幫助，希望能給個👍評論收藏三連！
想跟博主交朋友的可以通過查找，公_號?：前端老實人，獲取更多資料~，
博主為人老實，無償解答問題哦?
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/309533.html
標籤：其他
上一篇：JS基礎 -- 大復習(階段一)