关键词：
很多开发人员在使用jquery在前端和服务器端进行数据交互，所以很容易会认为在前端利用jquery就可以读取任何站点的数据了。近日在进行开 发时，因为要和第三方公司的一个项目进行数据的共享，因为考虑多不占用服务器的资源，遂决定直接在html进行数据的读取，不走服务器端进行中转了。然后 正好就遇到了浏览器端跨域访问的问题。
跨域的安全限制都是指浏览器端来说的，服务器端不存在跨域安全限制的问题。
目前浏览器端跨域访问常用的两种方法有两种：
1、通过jQuery的ajax进行跨域，这其实是采用的jsonp的方式来实现的。
jsonp是英文json with padding的缩写。它允许在服务器端生成script tags至返回至客户端，也就是动态生成javascript标签，通过javascript callback的形式实现数据读取。
html页面端示例代码：
//首先要引入jquery的js包
jQuery(document).ready(function(){
$.ajax({
type : "get", //jquey是不支持post方式跨域的
async:false,
url : "http://api.taobao.com/apitools/ajax_props.do", //跨域请求的URL
dataType : "jsonp",
//传递给请求处理程序，用以获得jsonp回调函数名的参数名(默认为:callback)
jsonp: "jsoncallback",
//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
jsonpCallback:"success_jsonpCallback",
//成功获取跨域服务器上的json数据后,会动态执行这个callback函数
success : function(json){
alert(json);
}
});
});
服务器端示例代码，以java为例：
服务器端代码，是重点，开始以为，只要客户端通过jsonp就可以直接跨域访问，其实不然，需要服务器端的支持才行。
public void jsonpTest() throws IOException{
HttpServletRequest request = ServletActionContext.getRequest();
HttpServletResponse response = ServletActionContext.getResponse();
//根据html指定的jsonp回调函数的参数名，获取回调函数的名称
//callbackName的值其实就是：success_jsonpCallback
String callbackName = (String)request.getAttribute("jsoncallback");
//简单模拟一个json字符串，实际可使用google的gson进行转换，次数通过字符串拼接
//{"name":"张三","age":28}
//是对"号进行转义
String jsonStr = "{"name":"张三","age":28}";
//最终返回的数据为：success_jsonpCallback({"name":"张三","age":28})
String renderStr = callbackName+"("+jsonStr+")";
response.setContentType("text/plain;charset=UTF-8");
response.getWriter().write(renderStr);
}
jsonp的原理：
首先在客户端注册一个callback (如:‘jsoncallback‘), 然后把callback的名字(如:success_jsonpCallback)传给服务器端对应的处理函数。
服务器先生成需要返回给客户端的 json 数据。然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数(jsoncallback)的值(success_jsonpCallback) 。
最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。
客户端浏览器，解析script标签，并将服务器端返回的数据，作为参数，
传入到了客户端预先定义好的 callback 函数(如上例中jquery $.ajax()方法封装的的success: function (json))里。
实际上跨域是通过动态增加script来加载数据，无法直接获得数据，所以需要使用回调函数。
2.使用jquery的getJson进行跨域读取数据
实际上getJson方式的根本原理和ajax使用jsonp的方式是一样的。
jquery中常用getJson来调用获取远程的数据，并通过json格式返回。函数的原型如下：
jQuery.getJSON(url,data,success(data,status,xhr))
| 参数 | 描述 |
|---|---|
| url | 必需。规定将请求发送的哪个 URL。 |
| data | 可选。规定连同请求发送到服务器的数据。 |
| success(data,status,xhr) |
可选。规定当请求成功时运行的函数。 额外的参数：
|
该函数是简写的ajax函数，实际上等价于：
$.ajax({
url: url,
data: data,
success: callback,
dataType: json
});
言归正传，下面我们来看如何使用getJson跨域获取数据。
html页面示例代码：
$.getJSON("http://api.taobao.com/apitools/ajax_props.do&jsoncallback=?",
function (data) {
alert(data);
}
);
执行原理：
发送请求时需要传一个callback的回调函数名到服务器端，服务器端拿到这个回调函数名，再将返回数据用参数的形式反回到客户端，这样客户端就能够调到。
所以发送请求URL的地址后面一定要上jsoncallback=?这样的参数，jquery会将?号自动替换成自动生成的回调函数的名称。
所以最终的实际请求为：http://api.taobao.com/apitools/ajax_props.do&jsoncallback=jsonp1322444422697
所以和ajax的方式想比较，也就是callback函数一个是自动生成的函数名，一个是手工指定的函数名。
jquery实现跨域请求实例
首先准备两个项目做测试（jsonp1，jsonp2）一：在jsonp1中做一个用于测试的链接defajax(request):callbacks=request.GET.get("callbacks")#get到的值为发起跨域请求的代码传过来的print("=======func_name",callbacks)importjsonprint("============可以===走到===这里... 查看详情
jQuery 和跨域 POST 请求
】jQuery和跨域POST请求【英文标题】：jQueryandCrossDomainPOSTRequests【发布时间】：2011-08-1923:23:22【问题描述】：我正在开发一个jQuery插件，它将成为一些RESTAPI的连接器。实施是直截了当的，但同源政策绝对是痛苦的。我主要需要执... 查看详情
使用jsonp来实现跨域请求
<!DOCTYPEhtml><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title></title><scriptsrc="jquery- 查看详情
jquery跨域发送post请求该怎么处理
参考技术A$.getJSON是对$.ajax的封装，只实现了GET，要用POST可以直接用$.ajax：$.ajax(type:"POST",url:url,data:postdata,dataType:'jsonp',success:success);本回答被提问者和网友采纳 查看详情
关于使用jq跨域请求的实现(代码片段)
今天算是把js跨域请求搞定了，想实现跨越，首先想到的是JSONP，但是具体去做的时候，发现有很多坑。在本地测试好之后又发现目标网站做了https证书认证，也就是实用的jsonp请求地址必须是https请求方式。。。无语。。继续实... 查看详情
cors跨域+异步上传文件
一：实现跨域CORS定义一种跨域访问的机制，可以让AJAX实现跨域访问。CORS允许一个域上的网络应用向另一个域提交跨域AJAX请求。实现此功能非常简单，只需由服务器发送一个响应标头即可。如果不需要文件上传，可以使用jquery.a... 查看详情
Firefox 跨域请求
】Firefox跨域请求【英文标题】：FirefoxCrossDomainRequest【发布时间】：2011-01-2513:05:07【问题描述】：我需要从在firefox中运行的脚本发出跨域请求（仅用于开发目的）。这可以实现吗？也许修改about:config键？谢谢！【问题讨论】：我... 查看详情
原生js实现ajax及ajax的跨域请求
前 言 如今，从事前端方面的程序猿们，如果，不懂一些前后台的数据交互方面的知识的话，估计都不太好意思说自己是程序猿。当然，如今有着许多的框架，都有相对应的前后台数据交... 查看详情
如何添加跨域资源共享请求标头？ [复制]
】如何添加跨域资源共享请求标头？[复制]【英文标题】：HowtoaddCrossOriginResourceSharingrequestheaders?[duplicate]【发布时间】：2019-02-2513:28:08【问题描述】：我正在使用ReactJS构建一个REST消费者，我已经构建了一个RESTapi作为后端服务，... 查看详情
4.同源策略与跨域请求
一.同源策略基本概念1.同源策略概念： 一种约定，它是浏览器最核心也是最基本的安全功能，同源指域名、协议、端口需要保持一直才能进行相互间的访问。2.例子：（1）http://a.com没有办法访问到http://b.com下的脚本文件和文... 查看详情
jquery.form 和跨域请求
】jquery.form和跨域请求【英文标题】：jquery.formandcross-domainrequests【发布时间】：2011-07-0106:34:54【问题描述】：我很难通过跨域请求创建jquery.form。我在使用Firefox和Chrome时遇到问题（甚至还没有尝试过IE）。解释：我的整个网站都... 查看详情
跨域 jquery ajax 请求
】跨域jqueryajax请求【英文标题】：crossdomainjqueryajaxrequest【发布时间】：2011-07-0517:16:56【问题描述】：我正在向一个urlhttp://json-cricket.appspot.com/score.json发送ajax请求通过代码varurl="http://json-cricket.appspot.com/score.json";$.get(url,function(data 查看详情
angularjs实现跨域请求
跨域，前端开发中常常遇到的问题。AngularJS实现跨域方式类似于Ajax。使用CORS机制。以下阐述一下AngularJS中使用$http实现跨域请求数据。AngularJSXMLHttpRequest：$http用于读取远程server的数据$http.post(url,data,[config]).success(function(){...}... 查看详情
解决跨域问题(代码片段)
浏览器端的同源策略: 如果两个页面的协议,端口和域名中的其中任意一个不相同,它们就是不同源的,浏览器会限制他们之间的资源交互;跨域: 跨域的安全限制只针对浏览器,服务器是没有跨域的安全限制的; 解... 查看详情
08:cors实现跨域请求
目录：1.1cors跨域请求介绍1.2使用tornado实现复杂请求1.1cors跨域请求介绍 返回顶部 1、cors是什么 1. 随着技术的发展，现在的浏览器可以支持主动设置从而允许跨域请求，即：跨域资... 查看详情
jquery跨域调用
今天在项目中须要做远程数据载入并渲染页面，直到开发阶段才意识到ajax跨域请求的问题，隐约记得Jquery有提过一个ajax跨域请求的解决方式，于是即刻翻出Jquery的API出来研究，发现JQuery对于Ajax的跨域请求有两类解决方式，只是... 查看详情
JavaScript 中的跨域请求与 jQuery 的 JSONP
】JavaScript中的跨域请求与jQuery的JSONP【英文标题】：CrossdomainrequestinJavaScriptvs.jQuery\'sJSONP【发布时间】：2017-01-1104:55:24【问题描述】：我试图按照下面提到的here模板，从客户端（浏览器）用JavaScript编写跨域请求（例如，GoogleFinan... 查看详情
django实现跨域请求(代码片段)
目录JsonP实现跨域在Django中间件中添加响应头@***CORS即CrossOriginResourceSharing跨域资源共享.跨域请求分两种：简单请求、复杂请求.简单请求简单请求必须满足下述条件.HTTP方法为这三种方法之一：HEAD、GET、POST·HTTP头消息不超出以下... 查看详情