Ajax跨域访问解决办法
方法1. jsonp实现ajax跨域访问示例
jsp代码:
<body>
<input type="button" onclick="testJsonp();" value="TestJsonP">
</body>
js代码:
function testJsonp(){
$.ajax({
type : 'GET',
dataType : 'jsonp', // 数据类型配置成jsonp
jsonp : "callback", //配置jsonp随机码标签,在服务器代码部分需要用到他来拼接一个json的js对象
url : 'http://127.0.0.1:8001/test', //服务路径
async : false,
data: {
"type":'0',
},
success : function (response) {
if(response.code == 200){
alert('返回成功!');
}else{
alert('服务器异常!');
}
},
error : function (){
alert('服务器异常!');
}
});
}
java代码:
@RequestMapping(value = "/test", method = RequestMethod.GET)
public @ResponseBody String testJsonp(@RequestParam(value = "type", defaultValue = "") String type, String callback) {
RequestResult data = new RequestResult(); // 配置需要返回的结果
data.setCode(200);
data.setMessage("success");
// 接收参数callback名称需要与js中配置的jsonp标签名一致
String result = callback+"("+JSONObject.fromObject(data).toString()+")";//拼接可执行的js
return result;
}
几个注意点:
1. jsonp只支持GET方式的请求,无论ajax中的type配置成何种方式,都会在默认以GET方式发送请求。无法满足restful方式的请求。
2. ajax中的jsonp的标签名要与服务端的接收标签参数一致。本例中都设置为'callback'.
3. 若想传递一个json格式的js对象到服务器,可以使用JSON.stringify()方法将js对象转化为json字符串,赋值到某个变量。在服务器端获取这个变量的值通过json工具,将该字符串转化为java对象。
方法2. 在服务器端放开访问权限,使允许接收ajax访问
前端代码不需修改。
java代码, 在BaseController中加入:
// protected HttpServletRequest request;
protected HttpServletResponse response;
// protected HttpSession session; @ModelAttribute
public void setReqAndRes(HttpServletRequest request, HttpServletResponse response) {
// this.request = request;
this.response = response;
// this.session = request.getSession();
response.setHeader("Access-Control-Allow-Origin", "*");
} @RequestMapping(value = "/test", method = RequestMethod.GET)
public @ResponseBody RequestResult test() {
RequestResult result = new RequestResult();
result.setCode(200);
result.setMessage("success"); return result;
}
说明:ModelAttribute的作用
1)放置在方法的形参上:表示引用Model中的数据
2)放置在方法上面:表示请求该类的每个Action前都会首先执行它,也可以将一些准备数据的操作放置在该方法里面。
这种方式只允许GET方式的请求,无法满足restful格式的请求。
方法3.终极解决办法(方法2的升级版)
前端代码不需修改。
在服务器端写一个filter,在doFilter方法中全面放开访问权限,并将此filter配置到web.xml中,或直接使用注解,划入spring管理。此方法完全支持restful的ajax跨域请求。
下面给一下spring mvc框架下的一个解决示例(亲测可用):
import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Component; @Component("myFilter")
public class MyFilter implements Filter { public void destroy() {
// System.out.println("过滤器销毁");
} public void doFilter(ServletRequest request, ServletResponse response1, FilterChain chain) throws IOException,
ServletException {
// System.out.println("执行过滤操作"); HttpServletResponse response = (HttpServletResponse) response1; response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader("Access-Control-Allow-Headers",
"User-Agent,Origin,Cache-Control,Content-type,Date,Server,withCredentials,AccessToken"); response.setHeader("Access-Control-Allow-Credentials", "true"); response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS, HEAD"); response.setHeader("Access-Control-Max-Age", "1209600"); response.setHeader("Access-Control-Expose-Headers", "accesstoken"); response.setHeader("Access-Control-Request-Headers", "accesstoken"); response.setHeader("Expires", "-1"); response.setHeader("Cache-Control", "no-cache"); response.setHeader("pragma", "no-cache"); chain.doFilter(request, response);
} public void init(FilterConfig arg0) throws ServletException {
// System.out.println("过滤器初始化");
} }
参考文章:
Ajax跨域(jsonp) 调用JAVA后台 (http://www.cnblogs.com/holdon521/p/5282354.html)
springMVC获取request和response (http://blog.sina.com.cn/s/blog_7085382f0102v9jg.html)
REST跨域访问解决CorsFilter (http://blog.csdn.net/u013628152/article/details/49490213)
Spring Boot 过滤器、监听器 (http://blog.csdn.net/catoop/article/details/50501688)
Ajax跨域访问解决办法的更多相关文章
- AJAX是什么? AJAX的交互模型(流程)?同步和异步的区别? AJAX跨域的解决办法?
AJAX是什么? AJAX的交互模型(流程)?同步和异步的区别? AJAX跨域的解决办法? 分类: web前端面试题2013-07-20 22:40 630人阅读 评论(0) 收藏 举报 目录(? ...
- (转)jquery ajax使用及跨域访问解决办法
原文地址:***/UIweb/jquery_ajax_kuayujiejue.html 最近开发中,设计到智能手机项目,给领导做几个demo.主要是用jquery和jqeury mobile. 越来越 ...
- ASP.net Web API允许跨域访问解决办法
来源 http://blog.csdn.net/wxg_kingwolfmsncn/article/details/48545099 遇到此跨域访问问题,解决办法如下: 方法一: 1. 在we ...
- 基于.Net Framework 4.0 Web API开发(5):ASP.NET Web APIs AJAX 跨域请求解决办法(CORS实现)
概述: ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题,特 ...
- ajax跨域终极解决办法!
在使用 ajax 的时候,往往需要通过 ajax 跨域请求一些? 但是 XMLHTTPRequest 是不支持跨域的,所以产生了 JSONP 这个东西来解决跨域,当然解决跨域的方式有很多种.... 第 ...
- ajax跨域的解决办法
<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content ...
- vue-cli开发时,ajax跨域详细解决办法
在config/index.js中进行如下配置 [即在进行ajax请求时,地址中任何以/api开头的请求地址都被解析为目标地址,target就是你想要的后台接口地址] proxyTable: { '/ ...
- Hbuilder编辑App时,ajax跨域访问失败问题
今天试着用Hbuilder写app的前段显示页面,在第一步时就被打住了,ajax异步调用服务器的登录接口时,报错, 显示这样的错误 XMLHttpRequest cannot loadhttp://w ...
- 浅析JSONP-解决Ajax跨域访问问题
浅析JSONP-解决Ajax跨域访问问题 很久没有写随笔了,总是感觉没时间,其实时间就是...废话少说,前几天,工作上有一新需求,需要前端web页面异步调用后台的Webservice方法返回信息.实现 ...
随机推荐
- Hive 12、Hive优化
要点:优化时,把hive sql当做map reduce程序来读,会有意想不到的惊喜. 理解hadoop的核心能力,是hive优化的根本. 长期观察hadoop处理数据的过程,有几个显著的特征: 1. ...
- python高级编程之访问超类中的方法:super()
# -*- coding: utf-8 -*- # python:2.x __author__ = 'Administrator' #超类01 #它是一个内建类型,用于访问属于某个对象超类特性 pri ...
- IOS 用drawRect 画表格
自定义一个View DrawLine DrawLine.h #import <UIKit/UIKit.h> @protocol gridTouchDelete <NSObject&g ...
- 修改UISearchBar placeholder textColor
[[UILabel appearanceWhenContainedIn:[UISearchBar class], nil] setTextColor:[UIColor redColor]];
- POJ 3694 LCA
题意:有N台电脑,他们之间有M条无向边. 然后询问,每次在他们之间加一条边,剩余的桥有多少. 思路:其实这题都不需要缩点了.. 直接记录每条桥的位置,然后每次询问进行一次LCA,当询问到桥时,桥数减1 ...
- [J2EE学习][post,get乱码处理]
post乱码 通过flitter过滤(原理待未来好好学习) <!-- post乱码过虑器 --> <filter> <filter-name>CharacterEn ...
- struts1:(Struts)ActionForm类及表单数据验证
在Struts的中央控制器中写了Struts的控制器角色,在这篇介绍下Struts的视图!Struts的视图组件:Struts框架中的视图组件主要包括:JSP页面.ActionForm类.Struts ...
- javascript统计输入文本的简易方法
计算文本框的输入字符数的简易方法: ]; var tValue = text.value; num = Math.ceil(getLength(tValue)/); //正则:用于区分中文为两个字节 ...
- PHP 中 AJAX 中文乱码解决
最近,在用PHP做一个AJAX功能时,出现了中文乱码.在网上搜索了一上,很多是有说不过试过都不行,我页面的的编码是UTF-8的,MYSQL中也是UTF-8的.以前在.NET中也遇到这样的问题,但只是在 ...
- linux io优化
场景:xml文件解析入库:并备份 问题:磁盘io异常,经常100%busy: linux io优化方法: 1.修改磁盘挂着参数,修改为writeback模式:对于文件读取频繁的可以设置noatime: ...