ajax跨域问题的解决办法

最新推荐文章于 2024-12-23 10:37:02 发布

宁晓

最新推荐文章于 2024-12-23 10:37:02 发布

阅读量531

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记本文章标签： ajax 跨域报错

本文链接：https://blog.youkuaiyun.com/TarkuNi/article/details/78052150

笔记本专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种通过使用JSONP方式解决跨域问题的方法，并提供了具体的前端及后端实现示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$.ajax({
url: "http://localhost:8080/wechart/qryOrderInfoListByWeChart",
type: "post",
dataType: 'json',
data: data,
error: function (XMLHttpReuqest, textStautus, errothrown) {
console.log(XMLHttpRequest.status);
},
success: function (json) {
alert(json);
}
});

浏览器调试一直报 XMLHttpRequest cannot load http://www.server.com/server.php. No 'Access-Control-Allow-Origin' header is present on the requested resource.Origin 'http://www.client.com' is therefore not allowed access.

搜了下说是跨域的问题，网上找解决方法，加crossDomain:true, type改成get啦、甚至监控浏览器类型和版本去修改ajax方法，试了十几种方法，都不行！最后问了一个大牛同事，解决方法记录一下，供码农们参考：

修改ajax请求为jsonp

$.ajax({
url: "http://localhost:8080/wechart/qryOrderInfoListByWeChart?openId=1123&pageSize=5&pageNum=1",
type: "POST",
dataType: "JSONP",
jsonp: "jsonpcallback",
jsonpCallback: "qryCallback",
success:function(msg){
//alert(msg.resultMsg);
},
error: function (msg) {
alert("查询安装工单失败！");
}
});

function qryCallback(result) {
console.log(result);

}

后台代码回调定义的callback方法：

@ResponseBody
@RequestMapping(value="/qryOrderInfoListByWeChart")
public void qryOrderInfoListByWeChart(HttpServletRequest request, HttpServletResponse response) throws Exception{
Map<String,Object> resultMap = new HashMap<String,Object>();
List<WorkOrderInstall> pageList = new ArrayList<WorkOrderInstall>();
Map<String,Object> param = new HashMap<String,Object>();
int pageSize=Integer.parseInt(request.getParameter("pageSize"));
int pageNum=Integer.parseInt(request.getParameter("pageNum"));
param.put("openId", request.getParameter("openId"));
param.put("pageNum", pageNum);
param.put("pageSize", pageSize);
param.put("pageStart", (pageNum-1)*pageSize);
pageList = workOrderService.qryOrderInfoByOpenId(param);
resultMap.put("resultType", "N");
resultMap.put("resultMsg", "success");
resultMap.put("pageList", pageList);
JSONObject jsonObject = JSONObject.fromObject(resultMap);
String jsonp=request.getParameter("jsonpcallback");
PrintWriter pw = response.getWriter();
pw.print(jsonp+"("+jsonObject.toString()+")");
pw.flush();
pw.close();

}

或者这样

@ResponseBody
@RequestMapping(value="/qryOrderInfoListByWeChart")
public String qryOrderInfoListByWeChart(String openId,int pageSize,int pageNum) throws Exception{
Map<String,Object> resultMap = new HashMap<String,Object>();
List<WorkOrderInstall> pageList = new ArrayList<WorkOrderInstall>();
Map<String,Object> param = new HashMap<String,Object>();
param.put("openId", openId);
param.put("pageNum", pageNum);
param.put("pageSize", pageSize);
param.put("pageStart", (pageNum-1)*pageSize);
pageList = workOrderService.qryOrderInfoByOpenId(param);
resultMap.put("resultType", "N");
resultMap.put("resultMsg", "success");
resultMap.put("pageList", pageList);
JSONObject jsonObject = JSONObject.fromObject(resultMap);
return "qryCallback("+jsonObject.toString()+")";

}