前言
最近博主在赶项目进度。所以微信二次开发那边的博文一直没有更新。后续时间会慢慢记录这个学习历程的。来年公司要开发微信小程序。到时也会记录一下历程。
闲话少说,今天在工作中遇到了SpringMVC接收json形式的参数需求,就自己写了一张页面发送Ajax请求来测试。由于不想再正开发的项目中添加无用的测试。就另起了一个Web项目来做。这样就遇到了一个新的问题。Ajax如何发送跨域请求。
刚开始想的是如何从JSP页面中发送这个请求。看了度娘中的帖子以及各大论坛中的相关方案,也尝试了不少。在此,就说一下自己的历程。
AJAX垮与请求实现方案一
首先是一种从JSP访问本地Servlet,然后经Servlet发送到服务器A中的Controller方式,不过很遗憾,没有解决博主的问题。但是还是值得来说一下这个思路的 - 在虚拟机中建立了一个项目来发送ajax请求,发送到虚拟机中的一个Servlet中。该Servlet代码片段如下:
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//创建一个指向外域(服务器)的链接
URL connect = new URL("http://192.168.1.184:9090/HanYiAPP/mine/test");
HttpURLConnection openConnection = (HttpURLConnection) connect.openConnection();
//服务器中设定请求方式的限制(最初是由JSP页面发起的POST请求。所以直接从请求中获取了)
openConnection.setRequestMethod(request.getMethod());
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
//获取Ajax发来的数据
Map<String, String[]> parameterMap = request.getParameterMap();
Set<Entry<String, String[]>> entrySet = parameterMap.entrySet();
Map<String,Object> map = new HashMap<String, Object>();
for (Entry<String, String[]> entry : entrySet) {
map.put(entry.getKey(), entry.getValue());
}
//转换成JSON对象
JSONObject jsonObject = new JSONObject(map);
//设置此URL连接可供输出
openConnection.setDoOutput(true);
OutputStreamWriter out = new OutputStreamWriter(openConnection.getOutputStream(),"UTF-8");
//输出
out.write(jsonObject.toJSONString());
out.flush();
//以下 用于接收服务器返回 的数据
StringBuffer data = new StringBuffer();
BufferedReader reader = new BufferedReader(new InputStreamReader(
openConnection.getInputStream(), "UTF-8"));
String line;
while ((line = reader.readLine()) != null) {
data.append(line);
}
System.out.println(data.toString());
}
用这个方法博主测试了很久。终究是达不到想要的结果。这个方案的结果是页面上会提示"Access-Control-Allow-Origin"这个错误(这个是要在服务器做设置的。)但是数据能够正常发送和接收。
AJAX跨域请求解决方案二
之后楼主就在服务器上下手了。页面这边就简简单单的写了这样的一些js
var obj = {};
obj['id']=1;
obj['name'] = "test";
$.ajax({
//url:"http://localhost:8080/TestWebBefore/test",
url:"http://192.168.1.184:9090/HanYiAPP/mine/test",
type:"post",
contentType:'application/json',
dataType:"json",
data:JSON.stringify(obj),
//data:JSON.stringify($("fo").serialize()),
success:function(data){
console.log(data);
},
error:function(data){
console.log(data);
}
});
之后便是在服务器这端做一系列的设置。
首先要解决的是AJAX跨域问题。当然,上面那个方案也能解决跨域问题,但是那样的话需要在客户端开发新的控制器。所以不是博主想要的结果。到此,不在提上述方案了。
度娘了一下AJAX跨域,发现还是有很多的码友在解决这样的事。在此,推荐一篇日志。是有关跨域资源共享的。各大论坛中总是粗略的说一下设置响应头就能解决,但是具体问题具体分析嘛。在SpringMVC种最有效的方式就是写一个filter来处理响应。核心代码如下:
HttpServletResponse rep = (HttpServletResponse)response;
rep.addHeader("Access-Control-Allow-Origin", "");
rep.addHeader("Access-Control-Allow-Methods", "POST,GET");
rep.addHeader("Access-Control-Allow-Credentials", "true");
rep.addHeader("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With");
chain.doFilter(request, response);
为什么要推荐那一篇日志呢。因为上述方法中涉及的参数在日志中已经有了很好的解释和说明。
Access-Control-Allow-Origin这个字段是必须的。值为代表着允许任何域访问。多个域的话可以用空格隔开(具体没有测试)
Access-Control-Allow-Methods这个字段是必须的。值为请求类型名。
Access-Control-Allow-Credentials该字段可选。它的值是一个布尔值,表示是否允许发送Cookie。默认情况下,
Cookie不包括在CORS请求之中。设为true,即表示服务器明确许可,Cookie可以
包含在请求中,一起发给服务器。这个值也只能设为true,如果服务器不要浏
览器发送Cookie,删除该字段即可。
Access-Control-Expose-Headers该字段可选。跨域请求时,XMLHttpRequest对象的getResponseHeader()方法只能拿到6个
基本字段:Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。
如果想拿到其他字段,就必须在Access-Control-Expose-Headers里面指定。上面的例子指定,getResponseHeader('FooBar')可以返回FooBar字段的值。
上述解释来自日志跨域资源共享。
这样一来,就AJAX可以发送跨域请求了。
AJAX跨域请求解决方案三
$.getJSON("http://URL?jsoncallback=?",JSON.stringify(obj),function(json){console.log(json);});
上述方式只能作用于GET请求
大概就有这样的几种方式来解决AJAX跨域问题。如果还有别的方案也可以一起交流哦