同源策略
同域名同端口同协议,若存在一个不同则违反了同源策略,因此需要跨域。
why:
csrf或xss攻击,如果拿到你的cookie中有token信息,就可以拿token信息以你的身份去操作了
跨域常见方式
1.jsonp
原理:htmlscript标签
的src属性获取其他源的数据
<script>
function getData(res){
console.log(res)
}
</script>
<script src="http://www.baidu.com/news?callback=getData">
cors
跨域资源共享,支持所有主流浏览器,ie9+。
原理:使用XMLHttpRequest发送请求时,如果不同源,会后台给headers头信息里加 Origin属性
Access-control-allow-origin: *
框架中的跨域
前端框架中,比如Vue框架跨域,代理跨域,本质上也是cors跨域。
在vue.config.js
中配置
proxy: {
traget:
changeOrigin: true,
pathRewrite:
}
window.postMessage
html5新特性 主流浏览器,ie8+。
window.postMessage("字符串", "*");