关于Ajax跨域问题及解决方案详析

复现Ajax跨域问题

做两个简单的小项目复现Ajax跨域问题. 后端语言使用Java

首先是一个简单的订单系统, 通过访问/loadOrderList, 最终以json串形式返回订单集合. 该项目使用Tomcat发布在7070端口.

@RequestMapping("/loadOrderList")
@ResponseBody
public ListOrder 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");

 ListOrder list = new ArrayList();
 list.add(o1);
 list.add(o2);
 list.add(o3);

 return list;
}

在另一个项目中做一个向订单系统发送一个ajax请求, 获取订单集合. 该项目使用Tomcat插件发布在9090端口.

//index.jsp

%@ page contentType="text/html;charset=UTF-8" language="java" %
html
head
 titleTitle/title
 script type="text/javascript" src="https://code.***jquery.com/jquery-1.11.3.js"/script
 script type="text/javascript"
 function sendAjax() {
  $.post("http://loc*a*lho*st:7070/order/loadOrderList", "uid=1234", function (data) {
  alert(data);
  });
 }
 /script
/head
body
 a href="javascript:sendAjax()" rel="external nofollow" rel="external nofollow" sendAjax/a
/body
/html

点击sendAjax超链接向订单系统发送ajax请求.

通过开发者工具发现虽然服务器以状态码200响应回来, 但是控制台却报错了.