脚本宝典收集整理的这篇文章主要介绍了Node.js跨域解决方案,让你吃透(妈妈级教学),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
同一时间,一个页面存在访问多个主机的情况,且每个主机之间,协议,主机,端口其中之一不相同。
两个主机,如果是协议,主机或域名,端口,其中之一不一样,就违反了同源策略
同源策略的限制:
同源策略的产生最初是为了预防XSS和CSRF跨域脚本攻击。
1.简单跨域请求
2.非简单跨域请求,范围比简单跨域请求更大
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跨域资源共享,只需要在后端设置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();
})
如果对您有帮助,希望能给个👍评论收藏三连!
想跟博主交朋友的可以通过查找,公_号❤:前端老实人,获取更多资料~。
博主为人老实,无偿解答问题哦❤
以上是脚本宝典为你收集整理的Node.js跨域解决方案,让你吃透(妈妈级教学)全部内容,希望文章能够帮你解决Node.js跨域解决方案,让你吃透(妈妈级教学)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。