有关Ajax跨域请求的解决方案

时间：2024-01-05 15:15:56

前言

最近博主在赶项目进度。所以微信二次开发那边的博文一直没有更新。后续时间会慢慢记录这个学习历程的。来年公司要开发微信小程序。到时也会记录一下历程。

闲话少说，今天在工作中遇到了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跨域问题。如果还有别的方案也可以一起交流哦

相关文章