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方法返回信息.实现 ...
随机推荐
- java保留有效数字
DecimalFormat df=DecimalFormat("######0.0") double d = df.format(xx): 保留一位就是"######0. ...
- xib和Storyboard 创建Cell的方式
xib 方式 .在Cell.h文件中加一个宏 #define cellIdentifier @"customCell" . ViewController中: - (void)vie ...
- UILabel+Create
#import <UIKit/UIKit.h> @interface UILabel (Create) /** * 创建普通Label * * @param frame frame * @ ...
- Android——SQLite实现面向对象CRUD
android中SQLite的使用,事实上倒也不难.可是与JDBC操作数据库相比,这个还是有点不顺手,并且我好久没写底层的封装了,使用SSM框架这些都不须要考虑......好了,废话不多说.以下直接建 ...
- OCR怎么能离开扫描仪呢？
说起OCR,说来说去就是和各种各样的图片打交道. 所以图片的质量很的关键. 说起图片的质量,不得不提的就是图片的採集. 眼下最靠谱的图像採集来源就是扫描仪. 扫描仪的话就大有说法,最靠谱的扫描仪,扫描 ...
- [转]IDENT_CURRENT、SCOPE_IDENTITY、@@IDENTITY 差異對照表
本文转自:http://www.dotblogs.com.tw/hunterpo/archive/2009/09/04/10421.aspx IDENT_CURRENT.SCOPE_IDENTITY ...
- [汇编学习笔记][第十三章int指令]
第十三章int指令 13.1 int指令 格式: int n, n 为中断类型码 可以用int指令调用任何一个中断的中断处理程序(简称中断例程). 13.4 BIOS和DOS 所提供的中断例程 BIO ...
- Sql server 数据库 单用户切换为多用户
使用master 下的sysprocesses 查询 db正在使用的spid 如 select spid from sysprocesseswhere dbid=DB_ID('DbName') 然后执 ...
- nginx+tomcat的集群和session复制
前端服务器采用nginx,后端应用服务器采用tomcat.nginx负责负载均衡,session复制在tomcat上处理. 1.nginx安装(略) 2.nginx配置负载均衡 http { incl ...
- C++中类的内存空间大小（sizeof）分析
注意类大小与结构体大小还是有一些不同的,类里面还包含成员函数(特别是虚函数),结构体中一般只有数据成员. 首先明确各数据类型占多大的空间.例如int到底是占2字节还是4字节空间: 在TC里,int是2 ...