跨域

在工作中,如果出现 Access-Control-Allow-Origin就说明你跨域了, 让后端同学在请求的文件中添加一个请求头。 setHeader('Access-Control-Allow-Origin:*')

同源策略

同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。

同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。

       域名:miaov.com 2017.miaov.com bbs.2017.miaov.com (ip的外号)

       协议:协议是通信计算机双方必须共同遵从的一组约定(http/https....)

       端口 : 与外界交流的出口(:80 :9090...)

同源

    是指,域名,协议,端口相同

跨域_第1张图片

跨域常用的解决方式

     CROS

    "跨域资源共享"(Cross-origin resource sharing),高版本浏览器下的 XMLHttpRequest + 服务器端设置请求权限(设置了请求头):除了IE6不支持,别的IE都支持,但是,每个版本支持的技术是不一样的,CORS与JSONP的使用目的相同,但是比JSONP更强大。

         标准浏览器

              利用 XMLHttpRequest() 与后端配合来解决。

               问题 :低版本的 XMLHttpRequest() 对象不支持与后端配合。

              后端 :  php :  header('Access-Control-Allow-Origin:*');

   服务器代理

        通过服务器文件(如PHP)去访问第三方的数据,这个文件又和前端是一个域,这个时候通过前端去访问这个服务器文件,达到跨域的目的。

   后端代理

        后端去请求数据不会有跨域问题,后端先把数据取到当前服务器中,然后前端通过 正常 的 ajax 请求来获取数据。

    jsonp(json and padding)

       script标签可以处理获取到的数据,会把获取到的数据解析为js来处理,利用 script 标签可以请求任意域名的js脚本的能力来实现。

       格式:

                函数名 + (放入数据)

                fn({name : '小明',age:20})

跨域_第2张图片

       基本思想

                网页通过添加一个元素,向服务器请求JSON数据,这种做法不受同源政策限制;服务器收到请求后,将数据放在一个指定名字的回调函数里传回来。

       使用jsonp的要素

                1. 使用script进行跨域访问

                2. 回调函数写成全局函数

       使用的测试地址: http://suggestion.baidu.com/su?wd=&cb=

        总结 :

                    1.数据格式必须是:函数名 + (放入数据)==》后端

                    2.前端必须在全局绑一个函数(一般情况是和数据格式的函数名一致)

                    3.在需要这些数据的情况下,创建一个script标签,然后把这个标签放到head中,这个时候就等同于在全局中调用了这个函数(异步)。

跨域_第3张图片
点击之后的三个语句,就相当于直接调用fn([1,2,3,4])

    也就是,后台有具体的一个函数调用,实参就是数据,前端这里需要创建这个函数,然后在需要调用数据的时候,创建一个script标签,src为后端的这个文件,然后将这个标签插入到head里,从创建标签到插入head,这就相当于是调用了这个函数。看到函数名(数据),你就可以认为这是一个jsonp.    

ajax 跨域功能

你可能感兴趣的:(跨域)