在说跨域之前,我们先来回忆一下同源策略。
我理解的同源策略:当我们在一个页面发起一个请求时,如何这个请求的地址的协议,域名,端口三者之中有一个和当前页面的协议,域名,端口不一模一样就会存在跨域问题,跨域只存在浏览器。
解决跨域的方法有:跨越代理,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';
用排除法剩下的方法就是需要预检的请求了。