跨域问题（使用jsonp解决）

发布时间：2020-12-16 18:39:17 所属栏目：百科来源：网络整理

导读：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

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

? <modelVersion>4.0.0</modelVersion>

? <groupId>com.test</groupId>

? <artifactId>testA</artifactId>

? <version>0.0.1-SNAPSHOT</version>

? <packaging>war</packaging>

? <dependencies>

? ?????????????????

? ????????????????? <dependency>

??????????????????????????? <groupId>javax.servlet</groupId>

??????????????????????????? <artifactId>servlet-api</artifactId>

??????????????????????????? <version>2.5</version>

??????????????????????????? <scope>provided</scope>

???????????????????? </dependency>

? </dependencies>

?????? <build>

????????????? <plugins>

???????????????????? <plugin>

????????????????????

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

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

??????????????????????????? <configuration>

?????????????????????????????????? <port>7001</port>

?????????????????????????????????? <path>/</path>

??????????????????????????? </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",

?????? success:function(d){

????????????? alert(d);

?????? }

});

</script>

</html>

8.testB的pom.xml

? <modelVersion>4.0.0</modelVersion>

? <groupId>com.test</groupId>

? <artifactId>testA</artifactId>

? <version>0.0.1-SNAPSHOT</version>

? <packaging>war</packaging>

? <dependencies>

? ?????????????????

? ????????????????? <dependency>

??????????????????????????? <groupId>javax.servlet</groupId>

??????????????????????????? <artifactId>servlet-api</artifactId>

??????????????????????????? <version>2.5</version>

??????????????????????????? <scope>provided</scope>

???????????????????? </dependency>

? </dependencies>

?????? <build>

????????????? <plugins>

???????????????????? <plugin>

????????????????????

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

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

?????? ???????????????????? <configuration>

?????????????????????????????????? <port>7002</port>

?????????????????????????????????? <path>/</path>

??????????????????????????? </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",

?????? 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",

?????? 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",

?????? dataType:"jsonp",

?????? success:function(d){

????????????? alert(d);

?????? }

});

</script>

</html>

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!