Open homobulla opened 6 years ago
什么是跨域 浏览器的同源策略会导致跨域,这里同源策略又分为两种:
iframe
XmlHttpRequest
XHR
HTTP
(第二种则是我们常见的协议、域名、端口 同源策略
为什么要有跨域 同源策略是为了安全,CSRF攻击正是利用了这一点。
JSONP
我们经常会说,用jsonp可以跨域请求,本质上是利用了script标签的src属性,Web 页面上调用 js 文件不受浏览器同源策略的影响,所以通过 Script 便签可以进行跨域的请求。
jsonp
script
src
<script type="text/javascript"> function handleResponse(response){ console.log(response); } var oBtn = document.getElementById('btn'); oBtn.onclick = function() { var script = document.createElement("script"); script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse"; document.body.insertBefore(script, document.body.firstChild); }; </script>
从上面代码我们可以看出为什么jsonp只支持get方式的请求了。
get
CORS CORS 全称是跨域资源共享(Cross-Origin Resource Sharing),是一种 ajax 跨域请求资源的方式,支持现代浏览器,IE支持10以上。 原理是利用服务器没有跨域一说,通过在服务器设置权限从而让浏览器可以访问。大致过程是:
withCredentials
true
response header
Access-Control-Allow-Origin:
这里是请求的域名
Access-Control-Allow-Credentials:true
postMessage 这是H5的一个新api,类似于vue父子组件的传值,都是通过一个事件函数发送数据,然后在目标页面监听这个事件。
api
什么是跨域 浏览器的同源策略会导致跨域,这里同源策略又分为两种:
iframe
跨域的情况,不同域名的iframe
是限制互相访问的。XmlHttpRequest
同源策略:禁止使用XHR
对象向不同源的服务器地址发起HTTP
请求。(第二种则是我们常见的协议、域名、端口 同源策略
为什么要有跨域 同源策略是为了安全,CSRF攻击正是利用了这一点。
JSONP
我们经常会说,用
jsonp
可以跨域请求,本质上是利用了script
标签的src
属性,Web 页面上调用 js 文件不受浏览器同源策略的影响,所以通过 Script 便签可以进行跨域的请求。从上面代码我们可以看出为什么jsonp只支持
get
方式的请求了。CORS CORS 全称是跨域资源共享(Cross-Origin Resource Sharing),是一种 ajax 跨域请求资源的方式,支持现代浏览器,IE支持10以上。 原理是利用服务器没有跨域一说,通过在服务器设置权限从而让浏览器可以访问。大致过程是:
withCredentials
为true
(带cookie)response header
中设置字段:Access-Control-Allow-Origin:
这里是请求的域名
Access-Control-Allow-Credentials:true
postMessage 这是H5的一个新
api
,类似于vue父子组件的传值,都是通过一个事件函数发送数据,然后在目标页面监听这个事件。