ajax提交jsp页面执行了但报错Ajax跨域问题及解决计划

这便是Ajax跨域出错的一种表现, 下面剖析缘故原由.

Ajax跨域先容Ajax跨域问题是由浏览器的同源策略造成的, 首先要理解源这个观点.我们可以通过协议+域名+端口确定一个源. 在上面的示例中, 你可以把一个项目理解为一个源. Ajax要求可以对源内的资源发起访问, 但是不同源之间进行Ajax就会有问题.当向不同源的资源发起Ajax要求时, 浏览器会加上Origin字段来标识源

Accept: /Accept-Encoding: gzip, deflate, brAccept-Language: zh-CN,zh;q=0.9Connection: keep-aliveContent-Length: 8Content-Type: application/x-www-form-urlencoded; charset=UTF-8Host: localhost:7070Origin: http://localhost:9090 协议+域名+端口做事器会根据Origin字段决定是否赞许这次要求, 如果Origin指定的源不在容许范围内, 做事器会返回一个不带有Access-Control-Allow-Origin字段的相应. 浏览器解析时创造短缺了这个字段, 就会报错. 这种缺点不能通过状态码识别, 由于状态码很有可能便是200(见上面的案例).

Ajax跨域办理方案下面先容最常用Ajax跨域办理方案.

一. 在做事端添加相应头Access-Control-Allow-Origin

ajax提交jsp页面执行了但报错Ajax跨域问题及解决计划 RESTful API

既然我们已经知道了Ajax跨域失落败是由于相应中短缺了相应头Access-Control-Allow-Origin, 那么就想办法加上去.以Java项目为例, 在后端我们利用CORSFilter过滤器加上该相应头.(假设是Maven项目), 首先在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>

配置后重启订单项目, 再次发起Ajax要求可以看到成功返回数据, 相应头中包含了Access-Control-Allow-Origin, 值为发起Ajax要求的源.

二. 利用JSONP办理

上面直接通过过滤器添加相应头的方法可以说是对症下药, 那么还有没有什么偏方呢?还真的有. 在jsp文件中常常通过通过<script>标签引入一段js代码, 这段代码常日来源于网络, 也便是不同源. 那么我们不妨通过<srcipt>标签完成Ajax要求, 这样便顺带办理了跨域问题.下面还是沿用上面的案例进行演示.我们对发送ajax的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> 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\"大众)@ResponseBodypublic 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;}

这个想法是不是很妙? 明白这个事理之后, 我们可以利用jQuery方便进行JSONP操作, 在上面的代码中我们人为指定了一个名为doCallBack的函数, 而jQuery会随机用韶光戳天生一个函数名, 事理和上面是一样的.以是完成一开时点击超链接发送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 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代码的特性, 绕过跨域问题.