跨域的几种方法(代码片段)

关键词：

//http://127.0.0.1:8888/jsonp.html
var script = document.createElement(‘script‘);
script.src = ‘http://127.0.0.1:2333/jsonpHandler?callback=_callback‘
document.body.appendChild(script);      //插入script标签
//回调处理函数 _callback
var _callback = function(obj)
      for(key in obj)
        console.log(‘key: ‘ + key +‘ value: ‘ + obj[key]);
    

//http://127.0.0.1:2333/jsonpHandler
app.get(‘/jsonpHandler‘, (req,res) => 
  let callback = req.query.callback;
  let obj = 
    type : ‘jsonp‘,
    name : ‘weapon-x‘
  ;
  res.writeHead(200, "Content-Type": "text/javascript");
  res.end(callback + ‘(‘ + JSON.stringify(obj) + ‘)‘);
)

//http://127.0.0.1:8888/cors.html
var xhr = new XMLHttpRequest();
xhr.onload = function(data)
  var _data = JSON.parse(data.target.responseText)
  for(key in _data)
    console.log(‘key: ‘ + key +‘ value: ‘ + _data[key]);
  
;
xhr.open(‘POST‘,‘http://127.0.0.1:2333/cors‘,true);
xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘);
xhr.send();

//http://127.0.0.1:2333/cors
app.post(‘/cors‘,(req,res) => 
  if(req.headers.origin)
    res.writeHead(200,
      "Content-Type": "text/html; charset=UTF-8",
      "Access-Control-Allow-Origin":‘http://127.0.0.1:8888‘
    );
    let people = 
      type : ‘cors‘,
      name : ‘weapon-x‘
    
    res.end(JSON.stringify(people));
  
)

//http://127.0.0.1:8888/server
var xhr = new XMLHttpRequest();
xhr.onload = function(data)
  var _data = JSON.parse(data.target.responseText)
  for(key in _data)
    console.log(‘key: ‘ + key +‘ value: ‘ + _data[key]);
  
;
xhr.open(‘POST‘,‘http://127.0.0.1:8888/feXhr‘,true);  //向本地服务器发送请求   
xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘);
xhr.send("url=http://127.0.0.1:2333/beXhr");    //以参数形式告知需要请求的后端接口

//http://127.0.0.1:8888/feXhr
app.post(‘/feXhr‘,(req,res) => 
  let url  = req.body.url;
  superagent.get(url)           //使用superagent想api接口发送请求
      .end(function (err,docs) 
          if(err)
              console.log(err);
              return
          
          res.end(docs.res.text); //返回到前端
      )
)

//http://127.0.0.1:2333/beXhr
app.get(‘/beXhr‘,(req,res) => 
  let obj = 
    type : ‘superagent‘,
    name : ‘weapon-x‘
  ;
  res.writeHead(200, "Content-Type": "text/javascript");
  res.end(JSON.stringify(obj));     //响应
)

originWindow.postMessage(message, targetOrigin);

originWindow：要发起请求的窗口引用 
message: 要发送出去的消息，可以是字符串或者对象 
targetOrigin: 指定哪些窗口能够收到消息，其值可以是字符串*（表示无限制）或者一个确切的URI

只有目标窗口的协议、主机地址或端口这三者全部匹配才会发送消息。

现在存在两个域名aaa.xxx.com和bbb.xxx.com。在aaa下嵌入bbb的页面，由于其document.name不一致，无法在aaa下操作bbb的js。

可以在aaa和bbb下通过js将document.name = ‘xxx.com‘;设置一致，来达到互相访问的作用。

跨域的几种方法及案例代码

1、通过动态script实现跨域functionloadScript(url,func){ varhead=document.head||document.getElementByTagName(‘head‘)[0]; varscript=document.createElement(‘script‘); script.src=url; script.onload=scri 查看详情

vue开发环境和生产环境里面解决跨域的几种方法(代码片段)

  跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议，端口，域名。只要这个3个中有一个不同就是跨域。这里列举一个经典的列子：#协议跨域http://a.baidu.com访问https://a.baidu.com；#端口跨域http://a.ba... 查看详情

详解cors跨域的几种不同实现方式(代码片段)

CORS定义CORS是一个W3C标准，全称是"跨域资源共享"（Cross-originresourcesharing），它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。提供了Web服务从不同域传来沙盒脚本的方法，以避开浏览器的... 查看详情

跨域的几种方法

js中几种实用的跨域方法原理详解(转自：http://www.cnblogs.com/2050/p/3191744.html)这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据... 查看详情

javascript跨域的几种方法

...是从a.html获取b.html里的数据1.JSONPjsonp是利用script标签没有跨域限制的特性，通过在src的url的参数上附加回调函数名字，然后服务器接收回调函数 查看详情

解决geoserver请求跨域的几种思路

...：http://www.cnblogs.com/naaoveGIS/1.背景描述    跨域问题是浏览器同源安全制引起的特别常见的问题。不同前端语言针对跨域解决方法有所区别。比如Flex语言做跨域请求时，如果中间件存有跨域文件（crossdomain.xml）则可... 查看详情

解决geoserver请求跨域的几种思路

1.背景描述    跨域问题是浏览器同源安全制引起的特别常见的问题。不同前端语言针对跨域解决方法有所区别。比如Flex语言做跨域请求时，如果中间件存有跨域文件（crossdomain.xml）则可以轻松实现跨域。  ... 查看详情

解决geoserver请求跨域的几种思路，第二种思路用过

1.背景描述    跨域问题是浏览器同源安全制引起的特别常见的问题。不同前端语言针对跨域解决方法有所区别。比如Flex语言做跨域请求时，如果中间件存有跨域文件（crossdomain.xml）则可以轻松实现跨域。  ... 查看详情

springboot解决跨域的四种姿势(代码片段)

简介跨域我就不多说了，我们今天开门见山直接解决跨域的几种姿势，那就上姿势姿势姿势一importorg.springframework.context.annotation.Configuration;importorg.springframework.web.servlet.config.annotation.CorsRegistry;importorg.springframework.web.s 查看详情

解决浏览器跨域的几种方式

  1、什么是跨域问题  在页面中使用js访问其他网站的数据时，就会出现跨域问题，比如在网站中使用ajax请求其他网站的天气、快递或者其他数据接口时，以及hybridapp中请求数据，浏览器会提  示一下错误... 查看详情

依靠前端解决跨域问题的几种方式

首先我们先了解下跨域的概念：　　出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建... 查看详情

关于跨域问题的几种解决方案(代码片段)

 1.什么是跨域？跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。例如：a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，所进行... 查看详情

项目中常遇到的几种跨域方案(代码片段)

1.jsonp　　jsonp属于最老的一种跨域方案了，我在现在的项目中已经很少见到$(‘#btn‘).click(function()varframe=document.createElement(‘script‘);frame.src=‘http://localhost:3000/article-list?name=leo&age=30&callback=func‘;$(‘bo 查看详情

前端跨域的那些事

这一节，我们来讲一讲，前端跨域的那些事，主要分成这样的几部分来讲解，一、为什么要跨域？二、常见的几种跨域与使用场景　　2.1JSONP跨域　　2.2iframe跨域　　2.3window.name跨域　　2.4document.domain跨域　　2.5cookie跨域　　2.6po... 查看详情

前端性能优化垃圾回收，闭包，跨域(代码片段)

...基本语法 Symbol垃圾回收机制标记清除法引用计数法闭包跨域的几种方式JSONP方式 查看详情

处理跨域的方法(代码片段)

处理跨域有4中方法分别是:JSONP、CORS、WebSocket、PostMessage一·首先介绍一下JSONP原理    JSONP是利用<script>标签的开放策略，网页可以得到从其他来源动态产生的json数据，JSONP请求一定需要对法国的服务器做支... 查看详情

web跨域解决方案1

阅读目录什么是跨域常用的几种跨域处理方法：跨域的原理解析及实现方法总结摘要：跨域问题，无论是面试还是平时的工作中，都会遇到，本文总结处理跨域问题的几种方法以及其原理，也让自己搞懂这方面的知识，走起。&nb... 查看详情

几种跨域的方法

p.p1{margin:0.0px0.0px0.0px0.0px;font:15.0pxConsolas}完整的http请求过程1、建立TCP连接2、WEB浏览器向WEB服务器发送请求命令3、WEB浏览器发送请求头信息（头信息：客服端环境信息，身份验证信息等）4、WEB服务器应答5、WEB服务器发送应答头... 查看详情