当前端和后端不属于同源策略就会访问不到数据

同源策略就是相同的协议，域名，端口。如果前后端不属于同源策略又想获得后端的数据我们就可以通过跨域开获得数据

跨域的安全限制都是对浏览器端来说的，服务器端是不存在跨域安全限制的。

浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互。

如果协议，端口和主机对于两个页面是相同的，则两个页面具有相同的源，否则就是不同源的。

如果要在js里发起跨域请求，则要进行一些特殊处理了。或者，你可以把请求发到自己的服务端，再通过后台代码发起请求，再将数据返回前端。

这里讲下使用jquery的jsonp如何发起跨域请求及其原理。

先看下准备环境：两个端口不一样，构成跨域请求的条件。

获取数据：获取数据的端口为9090

请求数据：请求数据的端口为8080

1、先看下直接发起ajax请求会怎么样

下面是发起请求端的代码：

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8"  language="java" %>
<html>
<head><title>跨域测试</title><script src="js/jquery-1.7.2.js"></script><script>$(document).ready(function () {$("#btn").click(function () {$.ajax({url: 'http://localhost:9090/student',type: 'GET',success: function (data) {$(text).val(data);}});});});</script>
</head>
<body><input id="btn" type="button" value="跨域获取数据" /><textarea id="text" style="width: 400px; height: 100px;"></textarea>
</body>
</html>

请求的结果如下图：可以看到跨域请求因为浏览器的同源策略被拦截了。

2、接下来看如何发起跨域请求。解决跨域请求的方式有很多，这里只说一下jquery的jsop方式及其原理。

首先我们需要明白，在页面上直接发起一个跨域的ajax请求是不可以的，但是，在页面上引入不同域上的js脚本却是可以的，就像你可以在自己的页面上使用<img src=""> 标签来随意显示某个域上的图片一样。

比如我在8080端口的页面上请求一个9090端口的图片：可以看到直接通过src跨域请求是可以的。

3、那么看下如何使用<script src="">来完成一个跨域请求：

　　当点击"跨域获取数据"的按钮时，添加一个<script>标签，用于发起跨域请求；注意看请求地址后面带了一个callback=showData的参数；

　　showData即是回调函数名称，传到后台，用于包裹数据。数据返回到前端后，就是showData(result)的形式，因为是script脚本，所以自动调用showData函数，而result就是showData的参数。

　　至此，我们算是跨域把数据请求回来了，但是比较麻烦，需要自己写脚本发起请求，然后写个回调函数处理数据，不是很方便。

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8"  language="java" %>
<html>
<head><title>跨域测试</title><script src="js/jquery-1.7.2.js"></script><script>//回调函数function showData (result) {var data = JSON.stringify(result); //json对象转成字符串$("#text").val(data);}$(document).ready(function () {$("#btn").click(function () {//向头部输入一个脚本，该脚本发起一个跨域请求$("head").append("<script src='http://localhost:9090/student?callback=showData'><\/script>");});});</script>
</head>
<body><input id="btn" type="button" value="跨域获取数据" /><textarea id="text" style="width: 400px; height: 100px;"></textarea></body>
</html>

服务端：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setCharacterEncoding("UTF-8");response.setContentType("text/html;charset=UTF-8");//数据List<Student> studentList = getStudentList();JSONArray jsonArray = JSONArray.fromObject(studentList);String result = jsonArray.toString();//前端传过来的回调函数名称String callback = request.getParameter("callback");//用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了result = callback + "(" + result + ")";response.getWriter().write(result);
}

结果：

4、再来看jquery的jsonp方式跨域请求：

服务端代码不变，js代码如下：最简单的方式，只需配置一个dataType:'jsonp'，就可以发起一个跨域请求。jsonp指定服务器返回的数据类型为jsonp格式，可以看发起的请求路径，自动带了一个callback=xxx，xxx是jquery随机生成的一个回调函数名称。

这里的success就跟上面的showData一样，如果有success函数则默认success()作为回调函数。

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8"  language="java" %>
<html>
<head><title>跨域测试</title><script src="js/jquery-1.7.2.js"></script><script>$(document).ready(function () {$("#btn").click(function () {$.ajax({url: "http://localhost:9090/student",type: "GET",dataType: "jsonp", //指定服务器返回的数据类型success: function (data) {var result = JSON.stringify(data); //json对象转成字符串$("#text").val(result);}});});});</script>
</head>
<body><input id="btn" type="button" value="跨域获取数据" /><textarea id="text" style="width: 400px; height: 100px;"></textarea></body>
</html>

效果：

再看看如何指定特定的回调函数：第30行代码

　　回调函数你可以写到<script>下(默认属于window对象)，或者指明写到window对象里，看jquery源码，可以看到jsonp调用回调函数时，是调用的window.callback。

　　然后看调用结果，发现，请求时带的参数是：callback=showData；调用回调函数的时候，先调用了指定的showData，然后再调用了success。所以，success是返回成功后必定会调用的函数，就看你怎么写了。

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8"  language="java" %>
<html>
<head><title>跨域测试</title><script src="js/jquery-1.7.2.js"></script><script>function showData (data) {console.info("调用showData");var result = JSON.stringify(data);$("#text").val(result);}$(document).ready(function () {//            window.showData = function  (data) {
//                console.info("调用showData");
//
//                var result = JSON.stringify(data);
//                $("#text").val(result);
//            }$("#btn").click(function () {$.ajax({url: "http://localhost:9090/student",type: "GET",dataType: "jsonp",  //指定服务器返回的数据类型jsonpCallback: "showData",  //指定回调函数名称success: function (data) {console.info("调用success");}});});});</script>
</head>
<body><input id="btn" type="button" value="跨域获取数据" /><textarea id="text" style="width: 400px; height: 100px;"></textarea></body>
</html>

效果图：

再看看如何改变callback这个名称：第23行代码

　　指定callback这个名称后，后台也需要跟着更改。

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8"  language="java" %>
<html>
<head><title>跨域测试</title><script src="js/jquery-1.7.2.js"></script><script>function showData (data) {console.info("调用showData");var result = JSON.stringify(data);$("#text").val(result);}$(document).ready(function () {$("#btn").click(function () {$.ajax({url: "http://localhost:9090/student",type: "GET",dataType: "jsonp",  //指定服务器返回的数据类型jsonp: "theFunction",   //指定参数名称jsonpCallback: "showData",  //指定回调函数名称success: function (data) {console.info("调用success");}});});});</script>
</head>
<body><input id="btn" type="button" value="跨域获取数据" /><textarea id="text" style="width: 400px; height: 100px;"></textarea></body>
</html>

服务端：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setCharacterEncoding("UTF-8");response.setContentType("text/html;charset=UTF-8");//数据List<Student> studentList = getStudentList();JSONArray jsonArray = JSONArray.fromObject(studentList);String result = jsonArray.toString();//前端传过来的回调函数名称String callback = request.getParameter("theFunction");//用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了result = callback + "(" + result + ")";response.getWriter().write(result);
}

效果图：

最后看看jsonp是否支持POST方式：ajax请求指定POST方式

　　可以看到，jsonp方式不支持POST方式跨域请求，就算指定成POST方式，会自动转为GET方式；而后端如果设置成POST方式了，那就请求不了了。

　　jsonp的实现方式其实就是<script>脚本请求地址的方式一样，只是ajax的jsonp对其做了封装，所以可想而知，jsonp是不支持POST方式的。

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8"  language="java" %>
<html>
<head><title>跨域测试</title><script src="js/jquery-1.7.2.js"></script><script>$(document).ready(function () {$("#btn").click(function () {$.ajax({url: "http://localhost:9090/student",type: "POST",   //post请求方式dataType: "jsonp",jsonp: "callback",success: function (data) {var result = JSON.stringify(data);$("#text").val(result);}});});});</script>
</head>
<body><input id="btn" type="button" value="跨域获取数据" /><textarea id="text" style="width: 400px; height: 100px;"></textarea>
</body>
</html>

效果图：

再补充一点，回到第一条：CORS头缺少“Access-Control-Allow-Origin”。

　　有时候你会发现其它都没问题，出现这个错误：这个错误代表服务端拒绝跨域访问。如果出现这个错误，就需要在服务端设置允许跨域请求。

　　response.setHeader("Access-Control-Allow-Origin", "*"); 设置允许任何域名跨域访问

设置可以跨域访问：第6行代码或第8行代码，设置其中一个即可。

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setCharacterEncoding("UTF-8");response.setContentType("text/html;charset=UTF-8");// * 表示允许任何域名跨域访问response.setHeader("Access-Control-Allow-Origin", "*");// 指定特定域名可以访问response.setHeader("Access-Control-Allow-Origin", "http:localhost:8080/");//数据List<Student> studentList = getStudentList();JSONArray jsonArray = JSONArray.fromObject(studentList);String result = jsonArray.toString();//前端传过来的回调函数名称String callback = request.getParameter("callback");//用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了result = callback + "(" + result + ")";response.getWriter().write(result);
}

其他跨域的解决方法：

app.all('*', function (req, res, next) {

res.header("Access-Control-Allow-Origin", "*");

res.header("Access-Control-Allow-Headers", "X-Requested-With");

res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");

res.header("X-Powered-By", ' 3.2.1')

res.header("Content-Type", "application/json;charset=utf-8");

next();

});

jQuery jsonp跨域请求相关推荐

.net学习之母版页执行顺序、jsonp跨域请求原理、IsPostBack原理、服务器端控件按钮Button点击时的过程、缓存、IHttpModule 过滤器...
1.WebForm使用母版页后执行的顺序是先执行子页面中的Page_Load,再执行母版页中的Page_Load,请求是先生成母版页的控件树,然后将子页面生成的控件树填充到母版页中,最后输出 2.We ...
JSONP跨域请求数据报错 “Unexpected token :”的解决办法
原文 http://www.cnphp6.com/archives/65409 Jquery使用ajax方法实现jsonp跨域请求数据的时候报错 "Uncaught SyntaxError ...
Jsonp 跨域请求实例
Jsonp 跨域请求实例关于jsonp的一个实例,其实自己也不是很了解,今天下午稍微研究了一下: 简单来说,jsonp就是为了两个不同网站之间数据传递而产生的,主要用于js脚本,因为浏览器本身是禁止 ...
轻松搞定JSONP跨域请求
轻松搞定JSONP跨域请求一.同源策略要理解跨域,先要了解一下"同源策略".所谓同源是指,域名,协议,端口相同.所谓"同源策略",简单的说就是基于安全考虑, ...
JS的jsonp是什么？5分钟学会jsonp跨域请求
一.jsonp是什么? jsonp是解决跨域请求的一种技术.浏览器为了防止CSRF攻击会采用同源策略(协议/主机/端口均相同)限制,对非同源发起http请求(即跨域请求)会被浏览器阻止. 二.json ...
【漏洞利用】JSONP跨域请求漏洞挖掘、利用详解
参考文章轻松搞定JSONP跨域请求 jsonp跨域原理,使用以及同源策略跨域漏洞丨JSONP和CORS跨域资源共享 Tag: Ref: [[019.同源策略]] 本片文章仅供学习使用,切勿触犯法律 ...
原生JS实现Ajax和JSONP跨域请求
背景: 对接身份证录入和门锁卡号录入设备中,安装驱动完成后,提供的接口服务是http://localhost:8099/?cmd=readbcardid&charset=gbk,返回的数据格式 ...
jsonp跨域请求响应结果处理函数(python)
接口测试跨域请求接口用的jsonp,需要将回调函数里的json字符串提取出来. jsonp跨域请求的响应结果格式: callback_functionname(json字符串). #coding:ut ...
实现百度下拉菜单实例（利用jsonp跨域请求百度数据接口）
JSONP:是JSON with padding(填充式JSON或参数式JSON)的简写,它由两部分组成:回调函数和数据.回调函数是当响应到来时应该在页面中调用的函数,回调函数的名字一般是在请求中指 ...

jQuery jsonp跨域请求

其他跨域的解决方法：

jQuery jsonp跨域请求相关推荐

最新文章

热门文章