jsonp跨域

来源：互联网发布：长虹网络电视机顶盒编辑：程序博客网时间：2024/05/17 08:58

jsonp是什么

JSON是一种数据格式，JSONP是一种数据调用方式。

工作原理：
1，利用<script>标签没有跨域限制的来达到与第三方通讯的目的。
2，当需要通讯时，本站脚本创建一个<script>元素，地址指向第三方的API网址，形如： <script src="http://www.example.net/api?callback=callback_function（data）></script> 并提供一个回调函数来接收数据（函数名可约定，或通过地址参数传递）。

3，第三方产生的响应为json数据的包装（故称之为jsonp，即json padding），形如： callback({"name":"hax","gender":"Male"})这样浏览器会调用callback函数，并传递解析后json对象作为参数。本站脚本可在callback函数里处理所传入的数据。

<body><div id="cur_year"></div><div id="iciba_ds"></div><script type="text/javascript">var cur_date = new Date();document.getElementById("cur_year").innerHTML = cur_date.getFullYear();function showIcibaDS(ds_data) {// show daily sentencecontent = ds_data.content;note = ds_data.note;ds_p = document.getElementById("iciba_ds")var content_span = document.createElement('span');var note_span = document.createElement('span');var br = document.createElement('br');content_span.innerHTML = content;note_span.innerHTML = note;ds_p.appendChild(content_span);ds_p.appendChild(br);ds_p.appendChild(note_span);}</script><!--下面就是最简单的jsonp操作，通过script标签中的url（url返回的内容中得是json格式--><script type="text/javascript" src="http://open.iciba.com/dsapi/?callback=showIcibaDS"></script></body>

输出：

2017

Flowers are so inconsistent! But I was too young to know how to love her…
花总是表里不一，而我太年轻了，不知道该怎样爱护她……

注意：url中返回的内容得是json格式，本代码中的url中的内容是：

{"sid":"2715","tts":"http:\/\/news.iciba.com\/admin\/tts\/2017-09-09-day","content":"Flowers are so inconsistent! But I was too young to know how to love her\u2026","note":"\u82b1\u603b\u662f\u8868\u91cc\u4e0d\u4e00\uff0c\u800c\u6211\u592a\u5e74\u8f7b\u4e86\uff0c\u4e0d\u77e5\u9053\u8be5\u600e\u6837\u7231\u62a4\u5979\u2026\u2026","love":"841","translation":"\u8bcd\u9738\u5c0f\u7f16\uff1a\u5982\u679c\u4e0d\u80fd\u6210\u4e3a\u522b\u4eba\u751f\u547d\u4e2d\u7684\u793c\u7269\uff0c\u5c31\u4e0d\u8981\u8d70\u8fdb\u522b\u4eba\u7684\u751f\u6d3b\u3002","picture":"http:\/\/cdn.iciba.com\/news\/word\/20170909.jpg","picture2":"http:\/\/cdn.iciba.com\/news\/word\/big_20170909b.jpg","caption":"\u8bcd\u9738\u6bcf\u65e5\u4e00\u53e5","dateline":"2017-09-09","s_pv":"0","sp_pv":"0","tags":[{"id":"30","name":"\u5feb\u4e50"},{"id":null,"name":null}],"fenxiang_img":"http:\/\/cdn.iciba.com\/web\/news\/longweibo\/imag\/2017-09-09.jpg"}

jsonp设置消息头

jsonp客户端不能修改请求头，需要处理的是服务端响应头的设置

1.第一步设置响应头

header('Access-Control-Allow-Origin:*'); //支持全域名访问，不安全，部署后需要固定限制为客户端网址

header('Access-Control-Allow-Methods:POST,GET,OPTIONS,DELETE'); //支持的http 动作

header('Access-Control-Allow-Headers:x-requested-with,content-type'); //响应头请按照自己需求添加。

2.第二部了解IE chrome 等浏览器对于跨域请求并要求设置Headers自定义参数的时候的 "预请求" 就是如果遇到跨域并设置headers的请求，所有请求需要两步完成！

A 第一步：发送预请求 OPTIONS 请求。此时服务器端需要对于OPTIONS请求作出响应一般使用202响应即可不用返回任何内容信息。（能看到这份手稿的人，本人不相信你后台处理不了一个options请求）

B 第二步：服务器accepted 第一步请求后浏览器自动执行第二步发送真正的请求。此时大多数人会发现请求成功了，但是有那么几个人会发现请求成功了但是没有任何信息返回 why？因为你自定义的请求头在服务器响应中不存在！

查看console输出会发现一个问题：

“Access-Control-Allow-Headers 列表中不存在请求标头 XXXXXX”【IE】，

request header field xxxxxx is not allowed by Access-Control-Allow-Header【chrome】

这是因为你的XXXX请求头没有在服务器端被允许哦~

遇到这个问题只有通过修改服务器端来完成，举例：需要设置 requesttype这么一个自定义头，那么你需要在服务端里面将header('Access-Control-Allow-Headers:x-requested-with,content-type，requesttype'); 同学们自行体会吧这种语法就是根据“,”分割自己需要设置什么头，必须要在服务端请求的响应头里面设置好，不然客户端永远永远提交不上去！

至此 JavaScript/ajax 跨域+ 修改httpheader 任务完美实现。

"人们都一直在抱怨 JavaScript同源策略限制了web前端的发展！然而是服务端做的不够细致！"

部分代码参考如下：代码只是提供了思想，具体步骤还要根据以上的文字自行揣摩实现。以上内容看不懂说明对于web一点也不了解，需要买本书看看喽~

客户端代码：

服务器端代码

阅读全文

0 0