跨域_跨域解决方案 - CSDN
跨域 订阅
《跨域》是漠粟写的网络小说连载于红袖添香网。 展开全文
《跨域》是漠粟写的网络小说连载于红袖添香网。
信息
作    者
漠粟
小说进度
连载
中文名
跨域
连载网站
红袖添香网
跨域小说类型
推理悬疑
收起全文
精华内容
参与话题
  • 什么是跨域?怎么解决跨域问题?

    千次阅读 2019-02-13 17:11:45
    什么是跨域跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制。 所谓同源是指,域名,协议,端口均相同,不明白没关系,举个栗子: ...

    什么是跨域?

    跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制。

    所谓同源是指,域名,协议,端口均相同,不明白没关系,举个栗子:

    http://www.123.com/index.html 调用 http://www.123.com/server.php (非跨域)

    http://www.123.com/index.html 调用 http://www.456.com/server.php (主域名不同:123/456,跨域)

    http://abc.123.com/index.html 调用 http://def.123.com/server.php (子域名不同:abc/def,跨域)

    http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php (端口不同:8080/8081,跨域)

    http://www.123.com/index.html 调用 https://www.123.com/server.php (协议不同:http/https,跨域)

    请注意:localhost和127.0.0.1虽然都指向本机,但也属于跨域。

    浏览器执行javascript脚本时,会检查这个脚本属于哪个页面,如果不是同源页面,就不会被执行。

    解决办法:

    1、JSONP:

    使用方式就不赘述了,但是要注意JSONP只支持GET请求,不支持POST请求。

    2、代理:

    例如www.123.com/index.html需要调用www.456.com/server.php,可以写一个接口www.123.com/server.php,由这个接口在后端去调用www.456.com/server.php并拿到返回值,然后再返回给index.html,这就是一个代理的模式。相当于绕过了浏览器端,自然就不存在跨域问题。

    3、PHP端修改header(XHR2方式)

    在php接口脚本中加入以下两句即可:

    header(‘Access-Control-Allow-Origin:*’);//允许所有来源访问

    header(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方

    作者:L瑜
    来源:CSDN
    原文:https://blog.csdn.net/lambert310/article/details/51683775
    版权声明:本文为博主原创文章,转载请附上博文链接!


    使用Nginx代理来解决跨域问题

    推荐使用Nginx代理来解决跨域问题,具体的用法参考我的博客:Nginx配置前后端分离项目代理–解决跨域问题

    展开全文
  • 八种方式实现跨域请求

    万次阅读 多人点赞 2019-07-29 22:39:56
    前端开发中我们经常会遇到跨域请求的情况,处理跨域请求方式很多,特整理如下: 浏览器的同源策略​ 提到跨域不能不先说一下”同源策略”。 ​ 何为同源?只有当协议、端口、和域名都相同的页面,则两个页面具有...

    前端开发中我们经常会遇到跨域请求的情况,处理跨域请求方式很多,特整理如下:

    浏览器的同源策略

    首选,跨域是由于浏览器端的同源策略限制所得来。

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

    那么,何为同源呢?只有当协议端口域名都相同的页面,则两个页面具有相同的。只要网站的协议protocol、 主机host、 端口号port 这三个中的任意一个不同,网站间的数据请求与传输便构成了跨域调用,会受到同源策略的限制。

    浏览器的同源策略,出于防范跨站脚本的攻击,禁止客户端脚本(如 JavaScript)对不同域的服务进行跨站调用(通常指使用 XMLHttpRequest 请求)。

    跨域请求方式

    解决跨域问题,最简单的莫过于通过 Nginx 反向代理 进行实现,但是其需要在服务器层面修改,且有可能请求的资源并不再我们控制范围内(第三方),所以该方式不能作为通用的解决方案,下面阐述了经常用到几种跨域方式:

    方式一:图片ping或script标签跨域

    图片ping 常用于跟踪用户点击页面或动态广告曝光次数。
    script标签 可以得到从其他来源数据,这也是 JSONP 依赖的根据。

    <img src="https://domain.com/pn">
    

    缺点

    • 只能发送Get请求 ,无法访问服务器的响应文本(单向请求)

    方式二:JSONP跨域

    JSONPJSON with Padding)是数据格式 JSON 的一种“使用模式”,可以让网页从别的网域要数据。根据 XmlHttpRequest 对象受到同源策略的影响,而利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的JSON数据,而这种使用模式就是所谓的 JSONP。用JSONP抓到的数据并不是JSON,而是任意的JavaScript,用 JavaScript解释器运行而不是用JSON解析器解析。所有,通过Chrome查看所有JSONP发送的Get请求都是js类型,而非 XHR。
    在这里插入图片描述

    缺点:

    • 只能使用Get请求
    • 不能注册 success、error 等事件监听函数,不能很容易的确定 JSONP 请求是否失败
    • JSONP 是从其他域中加载代码执行,容易受到跨站请求伪造的攻击,其安全性无法确保

    方式三:CORS

    Cross-Origin Resource Sharing(CORS)跨域资源共享是一份浏览器技术的规范,提供了 Web 服务从不同域传来沙盒脚本的方法,以避开浏览器的同源策略,确保安全的跨域数据传输。现代浏览器使用CORS在API容器如XMLHttpRequest来减少HTTP请求的风险来源。与 JSONP 不同,CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。服务器一般需要增加如下响应头的一种或几种:

    Access-Control-Allow-Origin: *
    Access-Control-Allow-Methods: POST, GET, OPTIONS
    Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
    Access-Control-Max-Age: 86400
    

    跨域请求默认不会携带Cookie信息,如果需要携带,请配置下述参数:

    "Access-Control-Allow-Credentials": true
    # Ajax设置
    "withCredentials": true
    

    方式四:window.name+iframe

    window.name通过在iframe(一般动态创建i)中加载跨域HTML文件来起作用。然后,HTML文件将传递给请求者的字符串内容赋值给window.name。然后,请求者可以检索window.name值作为响应。

    • iframe 标签的跨域能力;
    • window.name 属性值在文档刷新后依旧存在的能力(且最大允许2M左右)。

    每个 iframe 都有包裹它的 window,而这个 window 是 top window 的子窗口。contentWindow属性返回<iframe>元素的Window对象。你可以使用这个Window对象来访问iframe的文档及其内部DOM。

    下述用端口:10000表示 — domainA;10001表示 — domainB

    <!-- localhost:10000 -->
    <script>
      var iframe = document.createElement('iframe');
      iframe.style.display = 'none'; // 隐藏
    
      var state = 0; // 防止页面无限刷新
      iframe.onload = function() {
          if(state === 1) {
              console.log(JSON.parse(iframe.contentWindow.name));
              // 清除创建的iframe
              iframe.contentWindow.document.write('');
              iframe.contentWindow.close();
              document.body.removeChild(iframe);
          } else if(state === 0) {
              state = 1;
              // 加载完成,指向当前域,防止错误(proxy.html为空白页面)
              // Blocked a frame with origin "http://localhost:10000" from accessing a cross-origin frame.
              iframe.contentWindow.location = 'http://localhost:10000/proxy.html';
          }
      };
    
      iframe.src = 'http://localhost:10001';
      document.body.appendChild(iframe);
    </script>
    
    <!-- localhost:10001 -->
    <!DOCTYPE html>
    ...
    <script>
      window.name = JSON.stringify({a: 1, b: 2});
    </script>
    </html>
    

    注意:

    方式五:window.postMessage()

    HTML5新特性,可以用来向其他所有的 window 对象发送消息。需要注意的是我们必须要保证所有的脚本执行完才发送 MessageEvent,如果在函数执行的过程中调用了它,就会让后面的函数超时无法执行。

    下述代码实现了跨域存储localStorage

    下述用端口:10000表示 — domainA;10001表示 — domainB

    <!-- localhost:10000 -->
    <iframe src="http://localhost:10001/msg.html" name="myPostMessage" style="display:none;">
    </iframe>
    
    <script>
      function main() {
          LSsetItem('test', 'Test: ' + new Date());
          LSgetItem('test', function(value) {
              console.log('value: ' + value);
          });
          LSremoveItem('test');
      }
    
      var callbacks = {};
      window.addEventListener('message', function(event) {
          if (event.source === frames['myPostMessage']) {
              console.log(event)
              var data = /^#localStorage#(\d+)(null)?#([\S\s]*)/.exec(event.data);
              if (data) {
                  if (callbacks[data[1]]) {
                      callbacks[data[1]](data[2] === 'null' ? null : data[3]);
                  }
                  delete callbacks[data[1]];
              }
          }
      }, false);
    
      var domain = '*';
      // 增加
      function LSsetItem(key, value) {
          var obj = {
              setItem: key,
              value: value
          };
          frames['myPostMessage'].postMessage(JSON.stringify(obj), domain);
      }
      // 获取
      function LSgetItem(key, callback) {
          var identifier = new Date().getTime();
          var obj = {
              identifier: identifier,
              getItem: key
          };
          callbacks[identifier] = callback;
          frames['myPostMessage'].postMessage(JSON.stringify(obj), domain);
      }
      // 删除
      function LSremoveItem(key) {
          var obj = {
              removeItem: key
          };
          frames['myPostMessage'].postMessage(JSON.stringify(obj), domain);
      }
    </script>
    
    <!-- localhost:10001 -->
    <script>
      window.addEventListener('message', function(event) {
        console.log('Receiver debugging', event);
        if (event.origin == 'http://localhost:10000') {
          var data = JSON.parse(event.data);
          if ('setItem' in data) {
            localStorage.setItem(data.setItem, data.value);
          } else if ('getItem' in data) {
            var gotItem = localStorage.getItem(data.getItem);
            event.source.postMessage(
              '#localStorage#' + data.identifier +
              (gotItem === null ? 'null#' : '#' + gotItem),
              event.origin
            );
          } else if ('removeItem' in data) {
            localStorage.removeItem(data.removeItem);
          }
        }
      }, false);
    </script>
    

    注意Safari下会报错:

    Blocked a frame with origin “http://localhost:10001” from accessing a frame with origin “http://localhost:10000”. Protocols, domains, and ports must match.

    避免该错误,可以在Safari浏览器中勾选 开发菜单 => 停用跨域限制。或者只能使用服务器端转存的方式实现,因为Safari浏览器默认只支持CORS跨域请求。

    方式六:修改document.domain跨子域

    前提条件:这两个域名必须属于同一个基础域名!而且所用的协议,端口都要一致,否则无法利用 document.domain 进行跨域,所以只能跨子域

    根域范围内,允许把 domain 属性的值设置为它的上一级域。例如,在 “aaa.xxx.com” 域内,可以把 domain 设置为 “xxx.com” 但不能设置为 “xxx.org” 或者 “com”。

    现在存在两个域名aaa.xxx.com和bbb.xxx.com。在aaa下嵌入bbb的页面,由于其 document.name不一致,无法在aaa下操作bbb的js。可以在aaa和bbb下通过js将 document.name = 'xxx.com'; 设置一致,来达到互相访问的作用。

    方式七:WebSocket

    WebSocket protocol 是 HTML5 一种新的协议。它实现了浏览器与服务器全双工通信,同时允许跨域通讯,是server push技术的一种很棒的实现。相关文章,请查看:WebSocketWebSocket-SockJS

    需要注意: WebSocket 对象不支持 DOM 2 级事件侦听器,必须使用 DOM 0 级语法分别定义各个事件。

    方式八:代理

    同源策略是针对浏览器端进行的限制,可以通过服务器端来解决该问题
    DomainA客户端(浏览器) => DomainA服务器 => DomainB服务器 => DomainA客户端(浏览器)
    实现HTTP、HTTPS代理请参照: 创建HTTP与HTTPS服务器与客户端

    展开全文
  • 什么是跨域跨域解决方法

    万次阅读 多人点赞 2020-05-13 12:34:57
    一、为什么会出现跨域问题 出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建...

    一、为什么会出现跨域问题

    出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)

    二、什么是跨域

    当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

    当前页面url 被请求页面url 是否跨域 原因
    http://www.test.com/ http://www.test.com/index.html 同源(协议、域名、端口号相同)
    http://www.test.com/ https://www.test.com/index.html 跨域 协议不同(http/https)
    http://www.test.com/ http://www.baidu.com/ 跨域 主域名不同(test/baidu)
    http://www.test.com/ http://blog.test.com/ 跨域 子域名不同(www/blog)
    http://www.test.com:8080/ http://www.test.com:7001/ 跨域 端口号不同(8080/7001)

    三、非同源限制

    【1】无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB

    【2】无法接触非同源网页的 DOM

    【3】无法向非同源地址发送 AJAX 请求

    四、跨域解决方法

    【1】设置document.domain解决无法读取非同源网页的 Cookie问题

    因为浏览器是通过document.domain属性来检查两个页面是否同源,因此只要通过设置相同的document.domain,两个页面就可以共享Cookie(此方案仅限主域相同,子域不同的跨域应用场景。)

    // 两个页面都设置
    document.domain = 'test.com';

    【2】跨文档通信 API:window.postMessage()

    调用postMessage方法实现父窗口http://test1.com向子窗口http://test2.com发消息(子窗口同样可以通过该方法发送消息给父窗口)

    它可用于解决以下方面的问题:

    • 页面和其打开的新窗口的数据传递
    • 多窗口之间消息传递
    • 页面与嵌套的iframe消息传递
    • 上面三个场景的跨域数据传递
    // 父窗口打开一个子窗口
    var openWindow = window.open('http://test2.com', 'title');
    
    // 父窗口向子窗口发消息(第一个参数代表发送的内容,第二个参数代表接收消息窗口的url)
    openWindow.postMessage('Nice to meet you!', 'http://test2.com');

    调用message事件,监听对方发送的消息

    // 监听 message 消息
    window.addEventListener('message', function (e) {
      console.log(e.source); // e.source 发送消息的窗口
      console.log(e.origin); // e.origin 消息发向的网址
      console.log(e.data);   // e.data   发送的消息
    },false);

    【3】JSONP

    JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用,兼容性好(兼容低版本IE),缺点是只支持get请求,不支持post请求。

    核心思想:网页通过添加一个<script>元素,向服务器请求 JSON 数据,服务器收到请求后,将数据放在一个指定名字的回调函数的参数位置传回来。

    ①原生实现:

    <script src="http://test.com/data.php?callback=dosomething"></script>
    // 向服务器test.com发出请求,该请求的查询字符串有一个callback参数,用来指定回调函数的名字
    
    // 处理服务器返回回调函数的数据
    <script type="text/javascript">
        function dosomething(res){
            // 处理获得的数据
            console.log(res.data)
        }
    </script>
    

    ② jQuery ajax:

    $.ajax({
        url: 'http://www.test.com:8080/login',
        type: 'get',
        dataType: 'jsonp',  // 请求方式为jsonp
        jsonpCallback: "handleCallback",    // 自定义回调函数名
        data: {}
    });

    ③ Vue.js

    this.$http.jsonp('http://www.domain2.com:8080/login', {
        params: {},
        jsonp: 'handleCallback'
    }).then((res) => {
        console.log(res); 
    })

    【4】CORS

    CORS 是跨域资源分享(Cross-Origin Resource Sharing)的缩写。它是 W3C 标准,属于跨源 AJAX 请求的根本解决方法。

    1、普通跨域请求:只需服务器端设置Access-Control-Allow-Origin

    2、带cookie跨域请求:前后端都需要进行设置

    【前端设置】根据xhr.withCredentials字段判断是否带有cookie

    ①原生ajax

    var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容
    
    // 前端设置是否带cookie
    xhr.withCredentials = true;
    
    xhr.open('post', 'http://www.domain2.com:8080/login', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send('user=admin');
    
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            alert(xhr.responseText);
        }
    };

    ② jQuery ajax 

    $.ajax({
       url: 'http://www.test.com:8080/login',
       type: 'get',
       data: {},
       xhrFields: {
           withCredentials: true    // 前端设置是否带cookie
       },
       crossDomain: true,   // 会让请求头中包含跨域的额外信息,但不会含cookie
    });
    
    
        

    ③vue-resource

    Vue.http.options.credentials = true

    ④ axios 

    axios.defaults.withCredentials = true

    【服务端设置】

    服务器端对于CORS的支持,主要是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置,就可以允许Ajax进行跨域的访问。

    ① Java后台

    /*
     * 导入包:import javax.servlet.http.HttpServletResponse;
     * 接口参数中定义:HttpServletResponse response
     */
    
    // 允许跨域访问的域名:若有端口需写全(协议+域名+端口),若没有端口末尾不用加'/'
    response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com"); 
    
    // 允许前端带认证cookie:启用此项后,上面的域名不能为'*',必须指定具体的域名,否则浏览器会提示
    response.setHeader("Access-Control-Allow-Credentials", "true"); 
    
    // 提示OPTIONS预检时,后端需要设置的两个常用自定义头
    response.setHeader("Access-Control-Allow-Headers", "Content-Type,X-Requested-With");

    ② Nodejs后台

    var http = require('http');
    var server = http.createServer();
    var qs = require('querystring');
    
    server.on('request', function(req, res) {
        var postData = '';
    
        // 数据块接收中
        req.addListener('data', function(chunk) {
            postData += chunk;
        });
    
        // 数据接收完毕
        req.addListener('end', function() {
            postData = qs.parse(postData);
    
            // 跨域后台设置
            res.writeHead(200, {
                'Access-Control-Allow-Credentials': 'true',     // 后端允许发送Cookie
                'Access-Control-Allow-Origin': 'http://www.domain1.com',    // 允许访问的域(协议+域名+端口)
                /* 
                 * 此处设置的cookie还是domain2的而非domain1,因为后端也不能跨域写cookie(nginx反向代理可以实现),
                 * 但只要domain2中写入一次cookie认证,后面的跨域接口都能从domain2中获取cookie,从而实现所有的接口都能跨域访问
                 */
                'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly'  // HttpOnly的作用是让js无法读取cookie
            });
    
            res.write(JSON.stringify(postData));
            res.end();
        });
    });
    
    server.listen('8080');
    console.log('Server is running at port 8080...');

    ③ PHP后台

    <?php
     header("Access-Control-Allow-Origin:*");
    

    ④ Apache需要使用mod_headers模块来激活HTTP头的设置,它默认是激活的。你只需要在Apache配置文件的<Directory>, <Location>, <Files>或<VirtualHost>的配置里加入以下内容即可

    Header set Access-Control-Allow-Origin *

    文章每周持续更新,可以微信搜索「 前端大集锦 」第一时间阅读,回复【视频】【书籍】领取200G视频资料和30本PDF书籍资料

    展开全文
  • 什么是跨域?如何解决跨域问题?

    千次阅读 2018-07-26 17:28:19
    什么是跨域? 浏览器从一个域名的网页去请求另一个域名的资源时,域名、端口、协议任一不同,都是跨域  域(Domain)是Windows网络中独立运行的单位,域之间相互访问则需要建立信任关系(即Trust Relation)。信任...

    学习参考:https://blog.csdn.net/tjcjava/article/details/76468225

    什么是跨域?

    浏览器从一个域名的网页去请求另一个域名的资源时,域名、端口、协议任一不同,都是跨域 

    域(Domain)是Windows网络中独立运行的单位,域之间相互访问则需要建立信任关系(即Trust Relation)。信任关系是连接在域与域之间的桥梁。当一个域与其他域建立了信任关系后,2个域之间不但可以按需要相互进行管理,还可以跨网分配文件和打印机等设备资源,使不同的域之间实现网络资源的共享与管理。 有一种简明的说法来解释广域跨域:跨域访问,简单来说就是 A 网站的 javascript 代码试图访问 B 网站,包括提交内容和获取内容。由于安全原因,跨域访问是被各大浏览器所默认禁止的。
    在广域网环境中,由于浏览器的安全限制,网络连接的跨域访问时不被允许的,XmlHttpRequest也不例外。但有时候跨域访问资源是必需的。
    同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说,受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容,以防止它们之间的操作。同源策略不阻止将动态脚本元素插入文档中。
    参考理论一:在浏览器中不能直接来跨域访问,而在服务器端没有跨域安全限制。
    这样的话,可以在服务端完成跨域访问,而在客户端来取得结果就可以了。
    参考理论二:同源策略不阻止动态脚本元素插入,脚本访问可以跨域。

    域名: 
    主域名不同 http://www.baidu.com/index.html –>http://www.sina.com/test.js 
    子域名不同 http://www.666.baidu.com/index.html –>http://www.555.baidu.com/test.js 
    域名和域名ip http://www.baidu.com/index.html –>http://180.149.132.47/test.js 
    端口: 
    http://www.baidu.com:8080/index.html–http://www.baidu.com:8081/test.js 
    协议: 
    http://www.baidu.com:8080/index.html–https://www.baidu.com:8080/test.js 
    备注: 
    1、端口和协议的不同,只能通过后台来解决 
    2、localhost和127.0.0.1虽然都指向本机,但也属于跨域

    如何解决跨域问题?

    1、 通过jsonp跨域 
    JSONP(JSON with Padding:填充式JSON),应用JSON的一种新方法, 
    JSON、JSONP的区别: 
    1、JSON返回的是一串数据、JSONP返回的是脚本代码(包含一个函数调用) 
    2、JSONP 只支持get请求、不支持post请求 
    (类似往页面添加一个script标签,通过src属性去触发对指定地址的请求,故只能是Get请求)

    2、代理: 
      www.baidu.com/index.html需要调用www.sina.com/server.php,可以写一个接口www.baidu.com/server.php,由这个接口在后端去调用www.sina.com/server.php并拿到返回值,然后再返回给index.html 
    3、PHP端修改header 
      header(‘Access-Control-Allow-Origin:*’);//允许所有来源访问 
      header(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式 
    4、document.domain 
    跨域分为两种,一种xhr不能访问不同源的文档,另一种是不同window之间不能进行交互操作; 
      document.domain主要是解决第二种情况,且只能适用于主域相同子域不同的情况; 
      document.domain的设置是有限制的,我们只能把document.domain设置成自身或更高一级的父域,且主域必须相同。例如:a.b.example.com中某个文档的document.domain可以设成a.b.example.com、b.example.com 、example.com中的任意一个,但是不可以设成c.a.b.example.com,因为这是当前域的子域,也不可以设成baidu.com,因为主域已经不相同了。 
    兼容性:所有浏览器都支持; 
    优点: 
     可以实现不同window之间的相互访问和操作; 
    缺点: 
     只适用于父子window之间的通信,不能用于xhr; 
     只能在主域相同且子域不同的情况下使用; 
    使用方式: 
     不同的框架之间是可以获取window对象的,但却无法获取相应的属性和方法。比如,有一个页面,它的地址是http://www.example.com/a.html , 在这个页面里面有一个iframe,它的src是http://example.com/b.html, 很显然,这个页面与它里面的iframe框架是不同域的,所以我们是无法通过在页面中书写js代码来获取iframe中的东西的:

    <script type="text/javascript">
        function test(){
            var iframe = document.getElementById('ifame');
            var win = document.contentWindow;//可以获取到iframe里的window对象,但该window对象的属性和方法几乎是不可用的
            var doc = win.document;//这里获取不到iframe里的document对象
            var name = win.name;//这里同样获取不到window对象的name属性
        }
    </script>
    <iframe id = "iframe" src="http://example.com/b.html" onload = "test()"></iframe>

    这个时候,document.domain就可以派上用场了,我们只要把http://www.example.com/a.html 和 http://example.com/b.html这两个页面的document.domain都设成相同的域名就可以了。 
    1.在页面 http://www.example.com/a.html 中设置document.domain:

    <iframe id = "iframe" src="http://example.com/b.html" onload = "test()"></iframe>
    <script type="text/javascript">
        document.domain = 'example.com';//设置成主域
        function test(){
            alert(document.getElementById('iframe').contentWindow);//contentWindow 可取得子窗口的 window 对象
        }
    </script>

    2.在页面 http://example.com/b.html 中也设置document.domain:

    <script type="text/javascript">
        document.domain = 'example.com';//在iframe载入这个页面也设置document.domain,使之与主页面的document.domain相同
    </script>

    5、window.name 
    关键点:window.name在页面的生命周期里共享一个window.name; 
    兼容性:所有浏览器都支持; 
    优点: 
     最简单的利用了浏览器的特性来做到不同域之间的数据传递; 
     不需要前端和后端的特殊配制; 
    缺点: 
     大小限制:window.name最大size是2M左右,不同浏览器中会有不同约定; 
     安全性:当前页面所有window都可以修改,很不安全; 
     数据类型:传递数据只能限于字符串,如果是对象或者其他会自动被转化为字符串,如下; 
     这里写图片描述
    使用方式:修改window.name的值即可; 
    6、postMessage 
    关键点: 
     postMessage是h5引入的一个新概念,现在也在进一步的推广和发展中,他进行了一系列的封装,我们可以通过window.postMessage的方式进行使用,并可以监听其发送的消息; 
    兼容性:移动端可以放心用,但是pc端需要做降级处理 
    优点 
     不需要后端介入就可以做到跨域,一个函数外加两个参数(请求url,发送数据)就可以搞定; 
     移动端兼容性好; 
    缺点 
     无法做到一对一的传递方式:监听中需要做很多消息的识别,由于postMessage发出的消息对于同一个页面的不同功能相当于一个广播的过程,该页面的所有onmessage都会收到,所以需要做消息的判断; 
    安全性问题:三方可以通过截获,注入html或者脚本的形式监听到消息,从而能够做到篡改的效果,所以在postMessage和onmessage中一定要做好这方面的限制; 
     发送的数据会通过结构化克隆算法进行序列化,所以只有满足该算法要求的参数才能够被解析,否则会报错,如function就不能当作参数进行传递; 
    使用方式:通信的函数,sendMessage负责发送消息,bindEvent负责消息的监听并处理,可以通过代码来做一个大致了解;

    Storage.prototype.sendMessage_ = function(type, params, fn) {
        if (this.topWindow) {
            this.handleCookie_(type, params, fn);
            return;
        }
        var eventId = this.addToQueue_(fn, type);
        var storageIframe = document.getElementById('mip-storage-iframe');
        var element = document.createElement("a");
        element.href = this.origin;
        var origin = element.href.slice(0, element.href.indexOf(element.pathname) + 1);
        storageIframe.contentWindow.postMessage({
            type: type,
            params: params,
            eventId: eventId
        }, origin);
    }
    Storage.prototype.bindEvent_ = function() {
        window.onmessage = function (res) {
            // 判断消息来源
            if (window == res.source.window.parent &&
                res.data.type === this.messageType.RES &&
                window.location.href.match(res.origin.host).length > 0) {
                var fn = this.eventQueue[res.data.eventId];
                fn && fn();
                delete this.eventQueue[res.data.eventId];
                // reset id
                var isEmpty = true;
                for (var t in this.eventQueue) {
                    isEmpty = false;
                }
                if (isEmpty) {
                    this.id = 0;
                }
            }
        }.bind(this);
    }
    展开全文
  • 跨域的概念以及解决方案

    千次阅读 2017-12-13 15:15:39
    偶然看到的一篇文章,让我对跨域有了很好的了解。虽然已经收藏了原文,但找起来还是有些繁琐,所以干脆转载到我的博客里,方便以后查阅。也分享给大家,好东西要一起分享嘛。在本章结尾会有讲解http与https的区别,...
  • 跨域

    2020-09-22 10:13:36
    产生跨域的原因 浏览器同源策略 同源策略/SOP(Same origin policy),是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个...
  • 转自 PheonixHkbxoic 的《前端解决跨域问题的8种方案(最新最全)》 原址:https://www.cnblogs.com/PheonixHkbxoic/p/5760838.html 1.同源策略如下: URL 说明 是否允许通信 http://www.a.com/a.js ...
  • 关于跨域

    2019-08-18 14:14:31
    跨域 说到跨域,不得不聊一下浏览器的“同源策略”。 浏览器安全的基石是"同源政策"(same-origin policy),1995年,同源政策由 Netscape 公司引入浏览器。目前,所有浏览器都实行这个政策。最初,它的含义是指,...
  • 什么是跨域及怎么解决跨域问题?

    万次阅读 多人点赞 2019-08-23 10:27:30
    什么是跨域? 这篇博文解释的挺清楚,我直接引用https://blog.csdn.net/lambert310/article/details/51683775 跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制...
  • ajax 设置Access-Control-Allow-Origin实现跨域访问

    万次阅读 多人点赞 2015-06-06 21:51:14
    ajax跨域访问是一个老问题了,解决方法很多,比较常用的是JSONP方法,JSONP方法是一种非官方方法,而且这种方法只支持GET方式,不如POST方式安全。 即使使用jquery的jsonp方法,type设为POST,也会自动变为GET。如果...
  • axios解决跨域问题

    万次阅读 多人点赞 2018-10-10 17:44:34
    最近把我自己的网站升级生成前后端分离的项目(vue+springBoot),不可避免的就遇到了跨域问题。从中学到了许多知识,随便分享出来,也巩固下所学。  谈到跨域,首先得了解CORS(Cross origin resource sharing) ...
  • 解决ajax跨域问题【5种解决方案】

    万次阅读 多人点赞 2020-07-21 17:16:20
    什么是跨域问题? 跨域问题来源于JavaScript的"同源策略",即只有 协议+主机名+端口号 (如存在)相同,则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源。跨域问题是...
  • 跨域的情形有很多,最常见的有Ajax跨域、Socket跨域和Canvas跨域。下面列举一些我们常见的跨域情形下,某些浏览器控制台给出的错误提示。 FireFox下的提示:已阻止交叉源请求:同源策略不允许读取***上的远程资源。...
  • ajax跨域问题(三种解决方案)

    万次阅读 多人点赞 2017-05-28 17:53:26
    为什么会出现跨域 跨域问题来源于JavaScript的同源策略,即只有 协议+主机名+端口号 (如存在)相同,则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源。跨域问题是...
  • 后端(springboot)解决跨域问题

    万次阅读 多人点赞 2019-05-16 14:20:40
    首先我门要知道什么是跨域跨域是指 不同域名之间相互访问。跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制。也就是如果在A网站中,我们希望使用...
  • 最近连续两个朋友问我跨域相关问题,我猜想可能不少朋友也遇到类似问题,我打算写个博客聊一下我实际使用的配置, 先说明一下,我并不太了解这配置,没精力去了解太多,但我觉得其中有一些关键的小注意点,可能有些...
  • 完全跨域的单点登录

    万次阅读 多人点赞 2019-05-24 11:51:57
    完全跨域的单点登录实现方案基本和上篇文章介绍的一样,只不过生成ticket的过程更复杂些。上篇文章中的项目是不能完全跨域的,由于多个应用系统以及认证系统域不同,也没有共同的父域,导致登录后,认证系统向...
  • 前端解决跨域问题

    万次阅读 多人点赞 2020-06-29 10:27:37
    首先要了解浏览器跨域的问题源自哪里 浏览器跨域问题是源于浏览器的同源策略,,协议,域名,端口,三者有其中一个不一致就属于跨域。 URL网址的组成: http://www.baidu.com:80/index.html?username=xxx&...
  • 跨域跨域访问

    万次阅读 多人点赞 2015-12-24 14:59:05
    什么是跨域跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.google.com 的资源。跨域的严格一点的定义是:只要 协议,域名,端口有任何一个的不同,就被当作是跨域为什么...
  • 今天被跨域请求的问题困扰了很久,跨域一句话的理解就是:服务端和请求端的地址不一样。跨域的详细介绍可以参考:浏览器和服务器实现跨域(CORS)判定的原理,这里不多赘述。我出现的问题,主要就是客户端向发送了...
1 2 3 4 5 ... 20
收藏数 150,705
精华内容 60,282
关键字:

跨域