在说跨域之前,我们先来回忆一下同源策略。

我理解的同源策略:当我们在一个页面发起一个请求时,如何这个请求的地址的协议,域名,端口三者之中有一个和当前页面的协议,域名,端口不一模一样就会存在跨域问题,跨域只存在浏览器。

解决跨域的方法有:跨越代理,CORS方法解决跨域,JSONP解决跨越。

跨域代理:适用的场景生产环境不发生跨域,但是开发环境发生跨越。解决方法:就是要对开发服务器稍加配置就可以了。

列如:开发服务器是vue,在你搭建的vue项目的根目录下面创建一个vue.config.js文件。

配置:moudule.export={

devserver:{//配置开发服务器

proxy:{//配置代理

"/api/":{//这表示以api结尾的地址,如果你们不是以这个结尾就改成其他的。

target:"url"//代理到服务器

}

}

}

}

CORS方法解决跨域:这种解决跨越的方法是现在常用的一种方法。前端不需要做什么,主要是有服务器来完成。

cors有三种不同的交互模式:1:简单请求 2:需要预检的请求 3:附带身份凭证的请求。

判断是简单请求的条件:1请求方法属于 post get head 三者其中之一  2 请求头中包含安全字段,我们不在请求头中加入东西就基本满足该条件 3 如果请求头中有content-type的话它的是必须为text/plain  multipart/form-date   application/x-www-form-yrlencoded三者之一

附带身份凭证请求:带有xhr.withcredentials = true  credentials:'include';

用排除法剩下的方法就是需要预检的请求了。

posted on 2022-11-30 22:37  吴了  阅读(23)  评论(0编辑  收藏  举报