关于json数据跨域传输的问题

最新推荐文章于 2022-08-19 16:50:52 发布
最新推荐文章于 2022-08-19 16:50:52 发布
阅读量914 收藏
点赞数
分类专栏： javascript 文章标签： javascript json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kui_002/article/details/8676055
版权
源地址：http://fund.eastmoney.com/data/funddataforapp.aspx?t=base&f=100025

源文件：data({"json":"I am resource"});

jsonp接口地址：http://fund.eastmoney.com/data/funddataforapp.aspx?t=base&f=100025&cb=aa

jsonp接口数据：aa({"json":"i am resource"});

//ajax方式：
$.ajax({
	type:"get",
	url:"源地址",
	dataType:"jsonp",
	jsonp:"cb",							//jsonp数据约定接口,也或许是callback等。。。
	success:function(jsonData){
		console.log(jsonData.json);				//i am resource
	}
});


//原生方式：
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = http://fund.eastmoney.com/data/funddataforapp.aspx?t=base&f=100025;
document.getElementByTagName('body')[0].appendChild(script);		//这就是数据跨域传输的原理


<!-- 原生方式的效果是这样的：-->
<body>
	......
	<script type="text/javascript" src="http://fund.eastmoney.com/data/funddataforapp.aspx?t=base&f=100025"></script>	
</body>

<!-- 或者再清楚一点：-->
<body>
	......
	<script type="text/javascript">
		data( { "json":"i am resource" } );		<!-- 原来json数据是以函数参数的形式传送过来的，现在要做的就是定义data这个函数。-->   
								<!-- var  data = function(jsondata){ console.log(jsondata.json);   ==>   i am resource  }  -->
	</script>
</body>

难道我只能被动的定义【data()】这个函数？我能不能换个自己想要是名字呢？

对！这就叫做jsonp，一种跨域传输json数据的协议。

协议的内容是这样的：

把你想定义的函数名作为参数在url里传给我【&callback=myfun】，我就会把json数据的包装换成你想要的函数名，然后返回给你。

【myfun】你说了算，但是，【callback】 具体是什么字母得听我的，当然我一般会叫它callback，若是我叫它【cb】你也要遵守。

现在的url变成了这样：【url = url + '&cb=myfun';】

现在需要定义这个【myfun()】函数。

完整版的原生方式就变成了这样：

//完整版原生方式：
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = http://fund.eastmoney.com/data/funddataforapp.aspx?t=base&f=100025&cb=myfun;
document.getElementByTagName('body')[0].appendChild(script);		
var  myfun = function(jsonData){console.log(jsonData.json);}
kui_002
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
使用JSON实现数据的跨域传输的php代码
10-28
某网站后台用php脚本得到一个JSON格式的数据，交给前台javascript进行处理，使用JSON实现数据的跨域调用
解决Json数据跨域问题
ugfdfgg的博客
11-08 7547
解决Json数据跨域问题
http接口实现跨域传递json实体(httpclient和jsonp方式都有)
oLengYueHun的博客
08-19 1229
不同系统间的http接口使用httpclient和jsonp方式传递数据
使用JSON实现数据的跨域传输
weixin_34343000的博客
12-20 106
功能：某网站后台用php脚本得到一个JSON格式的数据，交给前台javascript进行处理，使用JSON实现数据的跨域调用 后台profile.php代码： &lt;?php $arr = array( 'firstname' =&gt; iconv('gb2312', 'utf-8', '非诚'), 'lastname' =&gt; iconv('gb2312',...
js中几种实用的跨域方法原理详解
萌萌的It人 www.itmmd.com
07-15 2460
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。 下表给出了相对http://store.company.com/dir/page.html同源检测的结果: 要解决跨域的问题，我们可以使用以下几种方法： 一、通过jsonp
getJSON解决 跨域问题例子
04-14
在IT行业中，跨域问题是一个常见的挑战，尤其是在Web开发中，因为浏览器的同源策略（Same-Origin Policy）限制了...在测试过程中，可以关注响应头、返回数据以及浏览器的控制台日志，确保数据能够正确无误地跨域传输。
json数据传输
07-20
以下是一些关于JSON数据传输的关键知识点： 1. JSON数据结构：JSON数据由键值对组成，数据类型包括字符串、数字、对象、数组、布尔值和null。例如： ```json { "name": "张三", "age": 30, "isStudent": false, ...
AngularJS实现的JSONP跨域访问数据传输功能详解
10-19
当服务器响应时，它会返回一个包裹在`JSON_CALLBACK`指定的函数内的JSON数据。AngularJS会自动处理这个响应，解析数据，并调用对应的回调函数，将数据传递给`.then`方法的回调函数处理。 需要注意的是，JSONP并非...
ajax请求json类型无法跨域传递cookie的问题解决
yyf的博客
03-23 1682
问题描述： 在前后端分离的项目中，已经解决跨域问题，但是前端的POST请求一直被登录拦截掉。 在排查后发现，这个请求是一个POST请求 contentType: “application/json”。这是一种复杂请求 在正式POST之前，浏览器会先发出一个OPTIONS请求（也叫preflight），同时header带上origin还有Access-Control-Request-...
JSON跨域问题总结
u010105972的博客
03-07 417
一、跨域问题的原因： 1 浏览器的检查 2 跨域 3 XMLHttpRequest请求二、跨域问题的解决： 1 禁止浏览器检查：使用dos命令，在启动浏览器的时候，加一个参数：chrome --disable-web-security --user-data-dir=g:\temp3 2 JSONP： JSONP是什么：JSONP是一种协议 JSONP解决跨域的时候后台代码需要改变吗：需要。 ...
Ajax用jsonp方式跨域发送请求
随遇而安
01-04 2万+
Ajax用jsonp方式跨域发送请求
JSON数据与后台跨域交互时候网络请求的发送方式
chongyane8438的博客
03-22 104
我们在和后台进行数据交互的时候，有时候是需要发送json格式的数据，这个时候我们需要在请求头设置Content-Type': 'application/json;charset=UTF-8；这个时候的网络请求并不是单词请求，而是分两次第一次是一个“opition”请求，如图： ...
使用jsonp实现跨域以及json与jsonp的区别
Wu ShanShan的博客
03-23 3993
一、 使用jsonp实现跨域 1. 跨域问题 从一个网站的页面中 ，去请求另外一个不同的网站中国的内容 由此引出了iframe标签：（利用iframe标签可以在当前页面下去访问另一个页面的内容。） &lt;h2&gt;我是利用iframe标签获得另一个页面&lt;/h2&gt; &lt;iframe src='http://www.baidu.com'&gt;&lt;/if...
解决本地请求不到json问题，老是出现跨域
qq_38179746的博客
02-28 637
有时候我们需要在本地模拟请求json数据，但是老是出现谷歌跨域的问题， 网上找了方法，说是把json和HTML文件放在同一目录，还有的是页面引用时加上callback的。 但是不知道咋的，可能是本人不才，始终没有效果，于是采用暴力的方法，直接放在该页面的js文件中有数据了 我就想反正是模拟数据，主要是看数据格式如何和页面交互，等到后台给了真实数据直接请求就欧克了。 下面放...
关于vue使用axios post发送json数据跨域请求403的解决方法
热门推荐
春虫虫丶丶丶的博客
08-17 10万+
最近使用vue框架开发项目的时候， 遇到了一个问题，其实这个问题在之前就已经遇到过，不过因为当时没有时间，所以采用了另外一种方法解决。今天再次遇到这个问题，就铁了心解决，在网上找到很多资料，经过尝试都没有能够很好解决，经过自己的一番折腾终于将这个问题解决。 原文已更新，请耐心往下看哦！ 1. 问题 vue开发的时候，使用axios跨域发送请求，同时post发送的数据格式是json格式，发送出...
跨域——vue中的axios.post使用json数据传输，出现请求头字段内容类型是不被允许的情况的解决方案
果果的博客
01-01 3万+
如何解决出现AXIOS的Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response. 问题描述： 由于restful接口需要在头部header传递两个字段： Content-Type: application/json Access-Token: ...
vue3 iframe跨域传输cookie
最新发布
03-25
由于浏览器同源策略的限制，跨域传输 cookie 需要进行特殊处理。以下是在 Vue 3 中跨域传输 cookie 的几种方案： 1. 使用 Nginx 反向代理：可以通过配置 Nginx 反向代理映射同一域名下的不同位置，从而完成跨域请求的 cookie 传递。 2. 在请求头中添加 withCredentials 属性：在 Vue3 中，可以在 axios 配置中设置 withCredentials 为 true，从而携带 cookie 信息进行跨域访问。 ``` axios.defaults.withCredentials = true; ``` 3. 使用 postMessage API：可以通过在父级页面中监听子级页面的 postMessage 事件，从而实现跨域传递数据和 cookie。 4. 使用 JWT 鉴权：可以通过使用 JSON Web Token（JWT）作为访问令牌来进行跨域请求，从而不需要传递 cookie 信息。 需要注意的是，对于跨域传输 cookie，需要对接口服务端进行相应的配置，以允许 cookie 在跨域请求中传递。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值