跨域实现方式

同源:同协议、端口、域名(三者必须全部相同)

同源策略:浏览器不允许当前页面向非同源站点发送请求(防止用户信息被恶意站点获取的基本措施)

跨域请求:当前站点向某些非同源站点进行请求

 

跨域请求方式:

一、服务器端允许跨域

服务器端设置响应头Access-Control-Allow-Origin: *

可以直接进行请求

二、JSONP(只支持GET请求)

 iframe、img、style、script等元素的src属性拥有可以直接向不同域请求资源的特性

jsonp正是利用script标签从此进行跨域请求

1     <script>
2        function hello(res){
3            console.log(res)
4        }
5     </script>
6     <script src=" https://cnodejs.org/api/v1/topic/5433d5e4e737cbe96dcef312?callback=hello"></script>
// 当前链接不支持JSONP,所以会报错

实现机制:

1.首先,服务器得支持JSON格式,返回的数据是一个由回调函数包裹的数据 hello(data)

2.当前站点需要实现hello方法,在资源请求完成前声明方法

 

三、CORS

需要浏览器和服务器同时支持,需要服务器提供CORS接口,浏览器根据AJAX请求自动添加一些附加的头信息,有时会多出一次附加请求(预检preflight)

 

四、代理跨域

通过同域名下的web服务器创建一个代理,访问不同域的资源

posted @ 2017-12-07 21:44  tatelZhang  阅读(215)  评论(0编辑  收藏  举报