/loadorderlist
, 最终以json串形式返回订单集合. 该项目使用tomcat发布在7070端口.@requestmapping("/loadorderlist") @responsebody public list<order> loadorderlist(string uid){ //模拟订单数据 order o1 = new order(); o1.setid("111"); o1.settotal(333.33); o1.setdate("2019-4-29"); order o2 = new order(); o2.setid("222"); o2.settotal(444.44); o2.setdate("2019-5-29"); order o3 = new order(); o3.setid("333"); o3.settotal(555.55); o3.setdate("2019-6-29"); list<order> list = new arraylist<>(); list.add(o1); list.add(o2); list.add(o3); return list; }
//index.jsp <%@ page contenttype="text/html;charset=utf-8" language="java" %> <html> <head> <title>title</title> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script> <script type="text/javascript"> function sendajax() { $.post("http://localhost:7070/order/loadorderlist", "uid=1234", function (data) { alert(data); }); } </script> </head> <body> <a href="javascript:sendajax()">sendajax</a> </body> </html>
sendajax
超链接向订单系统发送ajax请求.
源
这个概念.origin
字段来标识源accept: */* accept-encoding: gzip, deflate, br accept-language: zh-cn,zh;q=0.9 connection: keep-alive content-length: 8 content-type: application/x-www-form-urlencoded; charset=utf-8 host: localhost:7070 origin: http://localhost:9090 协议+域名+端口
origin
字段决定是否同意这次请求, 如果origin
指定的源不在许可范围内, 服务器会返回一个不带有access-control-allow-origin
字段的响应. 浏览器解析时发现缺少了这个字段, 就会报错. 这种错误不能通过状态码识别, 因为状态码很有可能就是200(见上面的案例).
access-control-allow-origin
access-control-allow-origin
, 那么就想办法加上去.corsfilter
过滤器加上该响应头.pom.xml
中添加坐标<dependency> <groupid>com.thetransactioncompany</groupid> <artifactid>cors-filter</artifactid> <version>2.5</version> <scope>runtime</scope> </dependency>
web.xml
中对过滤器进行配置.<filter> <filter-name>cors</filter-name> <filter-class>com.thetransactioncompany.cors.corsfilter</filter-class> <init-param> <param-name>cors.alloworigin</param-name><!--这个标签是关键, *代表所有源都能访问--> <param-value>*</param-value> </init-param> <init-param> <param-name>cors.supportedmethods</param-name> <param-value>get, post, head, put, delete</param-value> </init-param> <init-param> <param-name>cors.supportedheaders</param-name> <param-value>accept, origin, x-requested-with, content-type, last-modified</param-value> </init-param> <init-param> <param-name>cors.exposedheaders</param-name> <param-value>set-cookie</param-value> </init-param> <init-param> <param-name>cors.supportscredentials</param-name> <param-value>true</param-value> </init-param> </filter> <filter-mapping> <filter-name>cors</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>
access-control-allow-origin
, 值为发起ajax请求的源.<script>
标签引入一段js代码, 这段代码通常来源于网络, 也就是不同源. 那么我们不妨通过<srcipt>
标签完成ajax请求, 这样便顺带解决了跨域问题.<%@ page contenttype="text/html;charset=utf-8" language="java" %> <html> <head> <title>title</title> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script> <script> function docallback(data){ var str = json.stringify(data); alert(str); } </script> </head> <body> <script src="http://localhost:7070/order/loadorderlist3?uid=111&callback=docallback"></script> </body> </html>
docallback()
函数, 它接收一个字符串参数, 并且会把接收到的字符串显示出来.<body>
标签中编写<script>
标签, 我们将通过<script>
标签请求订单系统, 订单系统将会返回一段js代码, 这段js代码会调用docallback()
方法.docallback(字符串参数...)
js代码, 我们在订单系统中作如下操作.@requestmapping("/loadorderlist3") @responsebody public string loadorderlist3(string uid, string callback){ //模拟订单数据 order o1 = new order(); o1.setid("111"); o1.settotal(333.33); o1.setdate("2019-4-29"); order o2 = new order(); o2.setid("222"); o2.settotal(444.44); o2.setdate("2019-5-29"); order o3 = new order(); o3.setid("333"); o3.settotal(555.55); o3.setdate("2019-6-29"); list<order> list = new arraylist<>(); list.add(o1); list.add(o2); list.add(o3); //拼接js代码 string result = callback + "(" + json.tojsonstring(list) + ")"; return result; }
docallback
的函数, 而jquery会随机用时间戳生成一个函数名, 原理和上面是一样的.<%@ page contenttype="text/html;charset=utf-8" language="java" %> <html> <head> <title>title</title> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script> <script> function sendajax(){ $.getjson("http://localhost:7070/order/loadorderlist3?callback=?","uid=111", function (data) { var str = json.stringify(data); alert(str); }); } </script> </head> <body> <a href="javascript:sendajax()">sendajax</a> </body> </html>
cors
跨域访问问题的本质, 在后端加上响应头解决跨域问题. 方案二jsonp
利用的是<script>
标签能够跨域获取js代码的特性, 绕过跨域问题.
如对本文有疑问, 点击进行留言回复!!
网友评论