一、什么是jsonp
1）浏览器的同源策略：浏览器出于安全考虑具有跨域的安全限制，即限制从一个源加载的文档或脚本与来自另一个源的资源进行交互，而服务器端不存在跨域安全限制；
2）同源：两个页面的协议、域名、端口相同则为同源；
二、js如何发起jsonp
1）跨域方法：要在js里直接用XMLHttpRequest请求不同域上的数据时是不可以，解决方法一种是在前端进行一些特殊处理；二是可以把请求发到服务端，通过后台代码发起请求，将数据返回给前端；
2）jsonp原理：在页面直接发起一个跨域的ajax请求是不可以的，但是可以通过<script>标签在页面上引入不同域的js脚本来请求别的域的资源，就像可以直接在页面上使用<img src="">标签来请求其他页面的资源一样；
3）js使用<script>标签来跨域：
// html代码
<%@ 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>
当点击"跨域获取数据"的按钮时，添加一个<script>标签，用于发起跨域请求，注意看请求地址后面带了一个callback=showData的参数；
showData即是回调函数名称，传到后台，用于包裹数据。数据返回到前端后，就是showData(result)的形式，因为是script脚本，所以自动调用showData函数，而result就是showData的参数。
至此，我们算是跨域把数据请求回来了，但是比较麻烦，需要自己写脚本发起请求，然后写个回调函数处理数据，不是很方便。
// 服务器端
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);
}
屏幕快照 2018-07-25 下午10.59.59.png
三、jquery如何发起jsonp
1）服务端代码不变，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>
屏幕快照 2018-07-25 下午11.00.12.png
2）指定特定的回调函数名称
<%@ 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", //指定服务器返回的数据类型
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=showData；调用回调函数的时候，先调用了指定的showData，然后再调用了success，所以，success是返回成功后必定会调用的函数。
屏幕快照 2018-07-25 下午11.53.06.png
3）改变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方式跨域请求，就算指定成POST方式，也会自动转为GET方式；而后端如果设置成POST方式了，那就请求不了了，jsonp的实现方式其实和<script>脚本请求地址的方式一样，只是ajax的jsonp对其做了封装，所以可想而知，jsonp是不支持POST方式的。
屏幕快照 2018-07-25 下午11.53.38.png
4）服务器端设置
有时候其它地方都没问题，结果服务端拒绝跨域访问，如果出现这个错误，就需要在服务端设置允许跨域请求。
response.setHeader("Access-Control-Allow-Origin", "*"); //设置允许任何域名跨域访问
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);
}
四、vue如何跨域
1）vue-resouce有jsonp方法，而axios不提供jsonp方法
2）axios跨域方法请参考axios跨域学习总结
网友评论