模拟一个跨域的过程，从端口为8080端口的服务器访问端口为80端口的服务器资源。
1.使用的是springMVC框架，新建一个简单的登录页面。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <html> <head> <base href="<%=basePath%>"> </head> <body> 用户名： <input type="text" name="name"></input> <br> 密码： <input type="password" name="pwd"> <br> <button id="btn">提交</button> </body> </html> <!-- 拷贝一份发布到80端口的tomcat，访问地址改为80，访问另外一个服务器的东西。 --> <script type="text/javascript"> $("#btn").on('click', function(e) { $.ajax({ type : "POST", //提交方式 url : "<%=path%>/SpringMVC/getajax", //路径 dataType:'json', data : { pwd:$('[name=pwd]').val(), name:$('[name=name]').val() }, success : function(result) {//返回数据根据结果进行相应的处理 result = eval('(' + result + ')'); //单个数据才需要使用 if (result) { console.log(result); } else { console.log(result); } }, error : function(error) { console.log(error); } }); }); </script>
2.控制器为简单的打印
@Controller public class Ajax { @ResponseBody @RequestMapping("/getajax") public void ajax(String name,String pwd){ System.out.println(name+" "+pwd); } @RequestMapping("/ajax") public void toLogin(){ } }
现在可以正常的访问了。
页面里面输入名字密码提交，后台正常打印。
3.现在页面修改一下，添加到Hbuilder中，直接发布点开
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <html> <head> <base href="<%=basePath%>"> </head> 本地页面 <body> 用户名： <input type="text" name="name"></input> <br> 密码： <input type="password" name="pwd"> <br> <button id="btn">提交</button> </body> </html> <script type="text/javascript"> $("#btn").on('click', function(e) { $.ajax({ type : "POST", //提交方式 url : "http://127.0.0.1:8080/SpringMVC/getajax", //路径 dataType:'text', data : { pwd:$('[name=pwd]').val(), name:$('[name=name]').val() }, success : function(result) {//返回数据根据结果进行相应的处理 console.log(result); }, error : function(error) { console.log(error); } }); }); </script>
同样操作。由于是本地访问服务器，也就是域不同
导致访问时候报错
解决方法CORS：1.在服务端增加
@Controller public class Ajax { @ResponseBody @RequestMapping("/getajax") public void ajax(String name,String pwd,HttpServletResponse response){ System.out.println(name+" "+pwd); response.addHeader("Access-Control-Allow-Origin", "*"); } @RequestMapping("/ajax") public void toLogin(){ //自动映射到ajax页面。 } }
然后访问就ok了。
4.但是问题：因为跨域，默认是不支持cookie，所以导致sessionid不能传给服务器。所以每次请求都是新的session
服务端返回sessionID打印。
@Controller public class Ajax { @ResponseBody @RequestMapping("/getajax") public String ajax(String name,String pwd,HttpServletResponse response,HttpServletRequest request){ System.out.println(name+" "+pwd);
response.addHeader("Access-Control-Allow-Origin", "http://127.0.0.1:8020");
response.addHeader("Access-Control-Allow-Credentials", "true");
String str=request.getSession().getId(); return str; } @RequestMapping("/ajax") public void toLogin(){ //自动映射到ajax页面。 } }
jsp修改一下
<script type="text/javascript"> $("#btn").on('click', function(e) { $.ajax({ type: "POST", //提交方式 url: "http://127.0.0.1:8080/SpringMVC/getajax", //路径 dataType: 'text', data: { pwd: $('[name=pwd]').val(), name: $('[name=name]').val() }, success: function(result) { //返回数据根据结果进行相应的处理 console.log(result); }, error: function(error) { console.log(error); }, xhrFields: { withCredentials: true }, crossDomain: true }); }); </script>
提交多几次看一下结果：
每个的sessionID都相同了
6。用jsonp
JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。
服务器端：
@RequestMapping("/getajaxbyjsonp")
public void jsonp(HttpServletResponse response,HttpServletRequest request) throws Exception{
User user=new User();
user.setName("linq");
user.setNum(07);
ObjectMapper mapper=new ObjectMapper();
String jsonString = mapper.writeValueAsString(user);
String callBackFuncString = request.getParameter("callback");
PrintWriter out = response.getWriter();
out.print(callBackFuncString+"("+jsonString+")");
out.flush();
}
ajax：
<script type="text/javascript"> $("#btn").on('click', function(e) { $.ajax({ type: "POST", //提交方式 url: "http://127.0.0.1:8080/SpringMVC/getajaxbyjsonp", //路径 dataType: 'jsonp', data: { pwd: $('[name=pwd]').val(), name: $('[name=name]').val() }, success: function(result) { //返回数据根据结果进行相应的处理 console.log(result); }, error: function(error) { console.log(error); }/*, xhrFields: { withCredentials: true }, crossDomain: true*/ }); }); </script>