跨域问题（使用jsonp解决）

1. 跨域介绍

不同的域名或不同的端口都是跨域问题

www.a.comàwww.b.com 是跨域

www.a.comàwww.a.com:8080 是跨域

www.a.comàwww.a.com/api 不是跨域

2. 跨域问题用jsonp解决

1. jsonp原理

1.创建Maven中的war工程testA

2.在src/main/webapp里放入jquery，js.jsp（用来模拟从控制层返回数据），testA.html（用ajax来接收从控制层返回的参数）

js.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"

pageEncoding="utf-8"%>

out.print("{\"name\":123}");

testA.html

<!DOCTYPE html>

<html>

<head>

<title>testA</title>

</head>

<body>

</body>

alert($);

$.ajax({

url:"http://127.0.0.1:7001/js.jsp",

async:"false",

success:function(d){

alert(d);

}

});

</script>

</html>

3.pom.xml

<artifactId>testA</artifactId>

<version>0.0.1-SNAPSHOT</version>

<groupId>javax.servlet</groupId>

<artifactId>servlet-api</artifactId>

<scope>provided</scope>

</dependency>

</dependencies>

<build>

<groupId>org.apache.tomcat.maven</groupId>

<artifactId>tomcat7-maven-plugin</artifactId>

</configuration>

</plugin>

</plugins>

</build>

</project>

4.testA工程结构

5.结果如下，说明可以访问到本地的jquery和从本地的控制层返回的数据。

6.创建Maven的war工程testB

7.在src/main/webapp里创建测试用来跨域接收数据的testB.html

testB.html

<!DOCTYPE html>

<html>

<head>

<title>testB</title>

</head>

<body>

</body>

alert($);

$.ajax({

url:"http://127.0.0.1:7001/js.jsp",

async:"false",

success:function(d){

alert(d);

}

});

</script>

</html>

8.testB的pom.xml

<artifactId>testA</artifactId>

<version>0.0.1-SNAPSHOT</version>

<groupId>javax.servlet</groupId>

<artifactId>servlet-api</artifactId>

<scope>provided</scope>

</dependency>

</dependencies>

<build>

<groupId>org.apache.tomcat.maven</groupId>

<artifactId>tomcat7-maven-plugin</artifactId>

</configuration>

</plugin>

</plugins>

</build>

</project>

9.testB工程结构：

10.运行结果

11.看出来alert($);正常跨域成功！而从控制层输出的数据跨域失败，报错（No 'Access-Control-Allow-Origin'：没有“允许源访问控制”）。

12.可以用<script type="text/javascript" src="http://127.0.0.1:7001/jquery-3.2.1.min.js"></script>来实现跨域。修改testB中testB.html代码。

<!DOCTYPE html>

<html>

<head>

<title>testB</title>

</head>

<body>

</body>

/* $.ajax({

url:"http://127.0.0.1:7001/js.jsp",

async:"false",

success:function(d){

alert(d);

}

}); */

</script>

</html>

13.运行结果是没法解析的js

14.把testA中的js.jsp修改为

<%@ page language="java" contentType="text/html; charset=utf-8"

pageEncoding="utf-8"%>

out.print("alert({\"name\":123})");

15.运行结果：能打印出跨域接收的数据

16.再把testA中的js.jsp修改为

<%@ page language="java" contentType="text/html; charset=utf-8"

pageEncoding="utf-8"%>

out.print("fun({\"name\":123})");

17.运行结果：fun没定义

18.再修改testB中的testB.html

<!DOCTYPE html>

<html>

<head>

<title>testB</title>

</head>

<body>

</body>

/* $.ajax({

url:"http://127.0.0.1:7001/js.jsp",

async:"false",

success:function(d){

alert(d);

}

}); */

function fun(d){

alert(d);

}

</script>

</html>

19.运行结果：打印出结果

20.在控制层返回json字符串数据时，在json字符串前添加一个方法名再用小括号括起json字符串，再在网页定义刚刚方法名的方法，再用<script src=””></script>引用就可以实现跨域。这也是jsonp的实现原理。

2. jquery使用ajax跨域

1.jsonp在jquery的ajax里添加一行dataType:”jsonp”,也能实现跨域，不过控制层也需要修改。

js.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"

pageEncoding="utf-8"%>

out.print(request.getParameter("callback")+"({\"name\":123})");

testB.html

<!DOCTYPE html>

<html>

<head>

<title>testB</title>

</head>

<body>

</body>

$.ajax({

url:"http://127.0.0.1:7001/js.jsp",

async:"false",

dataType:"jsonp",

success:function(d){

alert(d);

}

});

</script>

</html>

2.运行结果：jquery的ajax跨域成功。