老铁们，大家好，相信还有很多朋友对于ajax如何解决跨域问题和java后端解决跨域的方法的相关问题不太懂，没关系，今天就由我来为大家分享分享ajax如何解决跨域问题以及java后端解决跨域的方法的问题，文章篇幅可能偏长，希望可以帮助到大家，下面一起来看看吧！
一、关于Ajax如何实现跨域访问的问题介绍
这篇文章主要介绍了关于关于Ajax如何实现跨域访问的问题，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
在实际项目当中，我们经常会遇到同一个域名下不同项目之间通过Ajax相互调用数据，这样问题就来了，如何通过Ajax实现跨域呢？
Jsonp解决跨域相对简单，服务器无需任何配置。具体实现如下：
url:'http://xxx.com',
CORS解决方案需要前端和服务端共同配置才能实现
url:'http://xxx.com',
alert('服务器发生错误！');
header('Access-Control-Allow-Origin: http://xxx.com');
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');
二、Ajax跨域请求如何使用
这次给大家带来Ajax跨域请求如何使用，使用Ajax跨域请求的注意事项有哪些，下面就是实战案例，一起来看一下。
本篇将讲述一个小白从遇到跨域不知道是跨域问题，到知道是跨域问题不知道如何解决，再到解决跨域问题，最后找到两种方法解决ajax跨域问题的全过程。
起因是这样的，为了复用，减少重复开发，单独开发了一个用户权限管理系统，共其他系统获取认证与授权信息，暂且称之为A系统；调用A系统以B为例。在B系统中用ajax调用A系统系统的接口(数据格式为json)，当时特别困惑，在A系统中访问相应的url可正常回返json数据，但是在B系统中使用 ajax请求同样的url则一点儿反应都没有，好像什么都没有发生一样。这样反反复复改来改去好久都没能解决，于是求救同事，提醒可能是ajax跨域问题，于是就将这个问题当做跨域问题来解决了。
知道问题的确切原因，剩下的就是找到解决问题的方法了。google了好久，再次在同事的指点下知道jQuery的ajax有jsonp这样的属性可以用来解决跨域的问题。
现在也知道了怎样来解决跨域问题，余下的就是实现的细节了。实现的过程中错误还是避免不了的。由于不了解json和jsonp两种格式的区别，也犯了错误，google了好久才解决。
首先来看看在页面中如何使用jQuery的ajax解决跨域问题的简单版：
var url='http://localhost:8080/WorkGroupManagment/open/getGroupById"
error:function(XMLHttpRequest, textStatus, errorThrown){
alert(XMLHttpRequest.readyState);
});这样写是完全没有问题的，起先error的处理函数中仅仅是alert(“error”)，为了进一步弄清楚是什么原因造成了错误，故将处理函数变为上面的实现方式。最后一行alert使用为；parsererror。百思不得其解，继续google，最终还是在万能的stackoverflow找到了答案，链接在这里。原因是jsonp的格式与json格式有着细微的差别，所以在server端的代码上稍稍有所不同。
比较一下json与jsonp格式的区别：
"result":{"name":"工作组1","id":1,"description":"11"}
"result":{"name":"工作组1","id":1,"description":"11"}
})看出来区别了吧，在url中callback传到后台的参数是神马callback就是神马，jsonp比json外面有多了一层，callback()。这样就知道怎么处理它了。于是修改后台代码。
@RequestMapping(value="/getGroupById")
public String getGroupById(@RequestParam("id") Long id,
HttpServletRequest request, HttpServletResponse response)
String callback= request.getParameter("callback");
group= groupService.getGroupById(id);
result= new ReturnObject(group,"获取成功", Constants.RESULT_SUCCESS);
result= new ReturnObject(group,"获取失败", Constants.RESULT_FAILED);
String json= JsonConverter.bean2Json(result);
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
PrintWriter out= response.getWriter();
out.print(callback+"("+ json+")");
}注意这里需要先将查询结果转换我json格式，然后用参数callback在json外面再套一层，就变成了jsonp。指定数据类型为jsonp的ajax就可以做进一步处理了。
虽然这样解决了跨域问题，还是回顾下造成parsererror的原因。原因在于盲目的把json格式的数据当做jsonp格式的数据让ajax处理，造成了这个错误，此时server端代码是这样的：
@RequestMapping(value="/getGroupById")
public ReturnObject getGroupById(@RequestParam("id") Long id,
HttpServletRequest request, HttpServletResponse response){
String callback= request.getParameter("callback");
group= groupService.getGroupById(id);
result= new ReturnObject(group,"获取成功", Constants.RESULT_SUCCESS);
result= new ReturnObject(group,"获取失败", Constants.RESULT_FAILED);
}至此解决ajax跨域问题的第一种方式就告一段落。
追求永无止境，在google的过程中，无意中发现了一个专门用来解决跨域问题的jQuery插件-jquery-jsonp。
有第一种方式的基础，使用jsonp插件也就比较简单了，server端代码无需任何改动。
来看一下如何使用jquery-jsonp插件解决跨域问题吧。
var url="http://localhost:8080/WorkGroupManagment/open/getGroupById"
$("#current-group").text("当前工作组:"+data.result.name);
alert("Could not find user"+msg);
});至此两种解决跨域问题的方式就全部介绍完毕。
补充：Ajax跨域问题有三种解决方案：
（1）通过Web代理服务器将不同域的应用统一通过代理服务器进行隔离，所有的应用都在一个域名下面了。（比如apache，nginx等）
（2）跨域的安全限制都是指浏览器端来说的.服务器端是不存在跨域安全限制的,所以通过本机服务器端通过类似httpclient方式完成“跨域访问”的工作。
2.通过<script>标签解决跨域问题
注意：凡是拥有"src"这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>
<script type="text/javascript">
var flightHandler= function(data){
alert('你查询的航班结果是：票价'+ data.price+'元，'+'余票'+ data.tickets+'张。');
var url="http://abc.com:8080/AjaxCrossDomain/data/data.jsp?code=CA1998&callback=flightHandler";
var script= document.createElement('script');
script.setAttribute('src', url);
document.getElementsByTagName('head')[0].appendChild(script);
</script>后台data.jsp内容：
<%@ page language="java" pageEncoding="UTF-8"%>
String callback= request.getParameter("callback");
StringBuilder builder= new StringBuilder();
builder.append(callback).append("({").append("\"code\": \"CA1998\",").append("\"price\": 1780,").append("\"tickets\": 5").append("});");
out.println(builder.toString());
%>使用jquery的jsonp来实现跨域访问，例子如下：
<script type="text/javascript">
url:"http://abc.com:8080/AjaxCrossDomain/jsonp/data.jsp",
jsonpCallback:"flightHandler",
alert('您查询到航班信息：票价：'+ json.price+'元，余票：'+ json.tickets+'张。');
</script>相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
HTML5+ajax怎么做出预览图片效果
三、Ajax 跨域问题及其解决方案
1、主流的前后端分离模式下，当前端调用后台接口时，由于是在非同一个域下的请求，从而会引发浏览器的自我安全保护机制，最终结果是接口成功请求并响应，但前端不能正常处理该返回数据。
2、因此，当同时满足以下三个条件的情况下，就会出现跨域问题：
3、想要彻底解决跨域问题，只需要破坏以上三个条件的任一即可：
4、添加浏览器启动参数： chrome--disable-web-security，但是极不推荐这种解决方式。
5、 Jsonp，全称 JSON with Padding，一种非官方的协议，而是一种约定；前端通过向后台发送 script类型请求解决跨域，此时接口响应的 application/javascript类型的数据会作为 callback函数的参数进行处理。
6、所以，后台也需要做相应的处理。以 Java为例，添加如下配置即可：
7、综上， jsonp请求存在以下几个弊端：
8、用 Nginx或 Apache来代理调用方的请求（客户端变更为相对路径请求，而非绝对路径），此时对于浏览器来说，由于请求是同源的，因此就不存在跨域问题。
9、以 Java应用为例，添加如下全局配置：
10、如果只想针对某个类下的接口，或者是某个具体的接口配置允许跨域，只需要在相应的地方添加注解@CrossOrigin即可。
11、如果配置了 nginx作为代理服务器，那么只需要为 nginx添加支持跨域请求即可：
12、 Q1：浏览器在执行跨域请求时，是先执行后判断，还是先判断后执行？
13、 A1：都有可能，这需要根据所发送的请求是简单请求还是非简单请求来判断；如果是非简单请求，浏览器每次在执行真正的请求之前，还会先发送一个 options请求方式的预检命令【可设定缓存时长，取消每次请求都要预检，提高效率，参考上面的服务端配置】。关于两种请求的区分及定义，参考下图说明：
14、 Q2：如果是允许带（被调用方） cookie的跨域请求，此时服务端同样配置为 Access-Control-Allow-Origin等于*，前端是否还可以请求成功？
15、 A2：不可以，此时要将 Access-Control-Allow-Origin指定为调用方具体的域【可以先取得调用方的域再动态配置，这样就不存在多个域请求的限制问题】，并且添加配置 Access-Control-Allow-Credentials为 true。
OK，关于ajax如何解决跨域问题和java后端解决跨域的方法的内容到此结束了，希望对大家有所帮助。
