js 跨域请求的方法

最新推荐文章于 2023-10-31 14:44:57 发布
最新推荐文章于 2023-10-31 14:44:57 发布
阅读量206 收藏 1
点赞数
分类专栏： js基础类
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25186543/article/details/79670267
版权

1   jsonp 

原理就是在前端定义一个接收数据的方法 , 把方法名拼在连接的后面  , 然后通过 script 标签的 src 就可以了,其它看代码:

连接其它是服务器的,然后服务器通过传过来的参数拿到相应的数据,,服务器提供动态生成脚本并在脚本是写上数据和传过来的方法名,,,调用 起来就可以了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head>
   <title></title>
   <script type= "text/javascript" >
   // 得到航班信息查询结果后的回调函数
   var  flightHandler = function (data){
     alert( '你查询的航班结果是：票价 '  + data.price + ' 元，'  + '余票 '  + data.tickets + ' 张。' );
   };
   // 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）
   var  url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler" ;
   // 创建script标签，设置其属性
   var  script = document.createElement( 'script' );
   script.setAttribute( 'src' , url);
   // 把script标签加入head，此时调用开始
   document.getElementsByTagName( 'head' )[0].appendChild(script);
   </script>
</head>
<body>
 
</body>
</html>

然后服务器生成的代码大概是这样

1
2
3
4
5
flightHandler({
   "code" : "CA1998" ,
   "price" : 1780,
   "tickets" : 5
});

直接用 jquery 也可以实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
  <html xmlns= "http://www.w3.org/1999/xhtml"  >
  <head>
    <title>Untitled Page</title>
    <script type= "text/javascript"  src=jquery.min.js "></script>
    <script type=" text/javascript ">
    jQuery(document).ready(function(){
     $.ajax({
        type: " get ",
        async: false,
        url: " http: //flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
        dataType: "jsonp ",
        jsonp: " callback ",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
        jsonpCallback:" flightHandler ",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写" ?"，jQuery会自动为你处理数据
        success: function (json){
          alert( '您查询到航班信息：票价： '  + json.price + ' 元，余票： '  + json.tickets + ' 张。' );
        },
        error: function (){
          alert( 'fail' );
        }
      });
    });
    </script>
    </head>
  <body>
  </body>
  </html>

2  postMessage

window.postMessage概述

1.html5最常用的API之一，实现两个不同域窗口对象之间的数据通信。

2.在发送数据窗口执行：otherWindow.postMessage(msg,origin)

  • otherWindow:表示接受数据的窗口的window对象，包括iframe的contentWindwohe和通过window.open打开的新窗口。
  • msg表示要发送的数据，包扩字符串和对象(ie9以下不支持，可以利用字符串和json互换)。
  • origin表示接收的域名。
3.在接受的窗口监听window的message事件，回掉函数参数接受一个事件对象event，包括的属性有：
  • data：接受的数据
  • origin：发送端的域
  • source：发送端的DOMWindow对象
# 利用window.postMessage在框架之间发送数据
1.在父框架页面index.html发送obj对象给远程服务器的wozien.com/test/b.html，该页面是通过iframe加载的，如下
[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>window.postMessage</title>  
  5.       
  6. </head>  
  7. <body>  
  8.     <iframe id="proxy" src="http://wozien.com/test/b.html" onload = "postMsg()" style="display: none" ></iframe>  
  9.   
  10.     <script type="text/javascript">  
  11.         var obj = {  
  12.             msg: 'this is come from client message!'  
  13.         }  
  14.   
  15.         function postMsg (){  
  16.             var iframe = document.getElementById('proxy');  
  17.             var win = iframe.contentWindow;  
  18.             win.postMessage(obj,'http://wozien.com');  
  19.         }  
  20.           
  21.     </script>  
  22. </body>  
  23. </html>  
2.在远程页面b.html中监听message事件，先通过origin属性判断下数据来源的域是否可信任，加强安全措施。具体代码如下：
[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <script type="text/javascript">  
  6.         window.onmessage = function(e){  
  7.             if(e.origin !== 'http://localhost') return;  
  8.             console.log(e.origin+' '+e.data.msg);  
  9.         }  
  10.     </script>  
  11. </head>  
  12. <body>  
  13.     <p>this is my server</p>  
  14. </body>  
  15. </html>  
3.在控制输出结果：
localhoat this is come from client message
qq_25186543
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript如何实现跨域请求
12-10
什么是跨域请求？ 简单的理解就是向不在同一个域名的服务器文件发出请求。这个还是用实际的例子来说明一下吧，比如baidu.com向cxyblog.com发送请求，这两个域名是不同的，那么这就是跨域了，出于安全性的考虑，这样...
ajax跨域请求js拒绝访问的解决方法
10-25
主要介绍了ajax跨域请求js拒绝访问的解决方法,需要的朋友可以参考下
js中几种实用的跨域方法原理详解
2301_78008478的博客
06-25 2130
例如：a.b.example.com 中某个文档的document.domain 可以设成a.b.example.com、b.example.com 、example.com中的任意一个，但是不可以设成 c.a.b.example.com,因为这是当前域的子域，也不可以设成baidu.com,因为主域已经不相同了。上面的例子中，我们用到的页面a.html和b.html是处于同一个域的，但是即使a.html与b.html处于不同的域中，上述结论同样是适用的，这也正是利用window.name进行跨域的原理。
JS中的跨域问题
qq_41812443的博客
03-19 426
JS中的跨域问题 一、什么是跨域？ 1.定义：跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.google.com 的资源。但是一般情况下不能这么做，它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。跨域的严格一点的定义是：只要 协议，域名，端口有任何一个的不同，就被当作是跨域 所谓同源是指，域名，协议，端口均相同。这...
js跨域的解决方案
muzidigbig的博客
05-15 1万+
指的是浏览器不能执行其他网站的脚本，简单来说是浏览器同源政策的限制，浏览器针对于的限制。两个页面拥有相同的协议，端口，域名就是同源，如果有一个不相同就是不同源。保护用户，防止一些网站盗取用户信息。 1、通过jsonp跨域 2、跨域资源共享（CORS） 3、document.domain + iframe跨域 4、location.hash + iframe 5、window.name + iframe跨域 6、postMessage跨域 7、nginx代理跨域 8、nodejs中间件代理跨域（非vue、v
使用jquery完成跨域访问
xiaozhuangyumaotao的博客
10-23 1万+
jquery实现跨域访问有两种方式，一个是$.getJSON，一个是$.ajax,注意只有get请求才能实现跨域访问。 一、$.getJSON实现跨域访问 get.html: <!doctypehtml> <html> <head> <metacharset="utf-8"> <title>javascript和jquery的跨域访问</title> <scripttype="text/javascript"src...
js处理跨域问题
m0_73481765的博客
07-02 693
JSONP：利用script标签的src属性不受同源策略的限制，将需要获取数据的地址作为script的src属性值，然后在服务器端将数据封装为一个函数的调用，返回给客户端。这种方法要求客户端的请求必须发送到同一个域名下的服务器，然后由服务器代理发送请求到目标服务器，因此可以解决跨域问题。postMessage：利用浏览器的postMessage方法，在页面之间传递数据，实现跨域通信。在JS中，跨域指的是在浏览器中使用Ajax等方式向其他域名的服务器请求数据时出现跨域问题，导致请求失败或数据无法返回的问题。
js跨域请求数据的3种常用的方法
11-24
由于js同源策略的影响，当在某一域名下请求其他域名，或者同一域名，不同端口下的url时，就会变成不被允许的跨域请求。 那这个时候通常怎么解决呢，对此菜鸟光头我稍作了整理： 1.JavaScript  在原生js（没有jQuery...
详解AngularJS如何实现跨域请求
11-25
下面阐述一下AngularJS中使用$http实现跨域请求数据。 AngularJS XMLHttpRequest：$http用于读取远程服务器的数据 $http.post(url, data, [config]).success(function(){ ... }); $http.get(url, [config]).success...
JS跨域请求的问题解析
12-02
如果上面两个域名想互相访问就需要跨域请求，一般情况下同源政策规定：允许跨源 写入，而不允许跨源 读取这意味着同源政策不会阻止将数据写入，只会禁止他们从域中读取数据， 或者对从其域收到的响应做任何事情。...
浏览器对跨域请求携带Cookie的方法
qq_48617322的博客
07-20 5654
浏览器对跨域请求携带Cookie的方法 企业开发时会分开发环境、测试环境以及生产环境，但是有的企业开发只有真正发布到线上的生产环境的流程才会严格配置，有的项目开发环境或者测试环境中，前后端配置没有特别严格要求，就导致前端请求发送时返回错误信息。比如项目发送了一个跨域请求，该请求需要自动携带Cookie信息给服务器进行身份认证，但是浏览器对跨域的请求不会自动携带Cookie的数据，此时在生产环境中前后端配置正常该请求正常返回数据，但是在开发环境和测试环境中要求不严格，前后端没有配合设置好配置信息，导致请求无法
同源策略与JS跨域请求(图文实例详解)
热门推荐
shuai_wy的专栏
04-19 1万+
同源策略与JS跨域跨域详解 Jquery Ajax 调用 Web API方法，Jquery ajax 请求.Net C# MVC. 本文介绍了同源策略，以及JS跨域问题出现的原因及原理。 本文以AJAX ，ASP.NET MVC 为例，详细的介绍了跨域请求的三种解决方案，分别为 JSONP ，CORS，代理层解决方案
前端解决跨域问题（9个方法）
weixin_62889848的博客
01-05 9930
前端解决跨域问题（9个方法）
浏览器跨域访问操作js如何实现？
最新发布
qq_43536020的博客
10-31 227
浏览器将自动处理跨域请求，如果服务器响应中的CORS头部设置正确，则允许跨域访问。这种方法允许在跨域的窗口之间进行安全的数据交换，但需要前后端共同配合实现。浏览器跨域访问操作是指在浏览器中，一个网页的JavaScript代码试图向不同域名、不同协议或不同端口的资源发起请求时所涉及的安全机制。需要注意的是，虽然上述方法可以实现跨域访问，但它们都需要服务器端的支持或特殊的前端代码处理。然而，在某些情况下，我们可能需要进行跨域访问，例如在前端使用AJAX请求不同域上的数据。
js跨域的八种方式
qq_43383334的博客
10-18 388
1. JSONP JSONP 是一种利用 unction jsonp(url, callback) { const script = document.createElement('script'); script.src = `${url}&callback=${callback}`; document.body.appendChild(script); window[callback] = function(data) { document.body.removeChil
JavaScript中的跨域请求和解决方案
qq_34147019的博客
09-12 331
跨域请求是指在浏览器的同一标签页或不同标签页之间，通过JavaScript访问不同域名下的资源。这通常受到同源策略（Same-Origin Policy）的限制，以确保Web应用程序的安全性。同源策略要求网页只能请求与其来源相同的资源。
js跨域请求
MYuanFang的博客
08-22 377
跨域请求，跨域简单的来说，指的是两个资源非同源。出于安全方面的考虑，页面中的JavaScript在请求非同源的资源时就会出跨域问题——即跨域请求，这时，由于同源策略，我们的请求会被浏览器禁止。也就出现了 我们常说的跨域问题。 同源策略 ： 协议相同(比如都是http://) 端口相同(通常都是80) 域名相同 如果这三个条件中有任何一条不满足,就不允许两个脚本进行交互。 解决...
MediaElement.js 跨域请求视频播放
05-30
要在 MediaElement.js 中实现跨域请求视频播放，需要在服务器端设置 CORS（跨域资源共享）响应头。具体步骤如下： 1. 在服务器端设置响应头 在服务器端返回视频文件时，需要设置 Access-Control-Allow-Origin 响应...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值