Ajax跨域之ContentType为application/json请求失败的问题
项目里的接口都是用springmvc写的,其中在@requestmapping接口中定义了consumes="application/json",也就是该接口只接受ContentType为application/json的请求。
接口写好用工具测试接口都是可以正常请求,但是在浏览器中用ajax请求就不行。
百度一下,原来在使用Ajax跨域请求时,如果设置Header的ContentType为application/json,会分两次发送请求。第一次先发送Method为OPTIONS的请求到服务器,这个请求会询问服务器支持哪些请求方法(GET,POST等),支持哪些请求头等等服务器的支持情况。等到这个请求返回后,如果原来我们准备发送的请求符合服务器的规则,那么才会继续发送第二个请求,否则会在Console中报错。
为什么在跨域的时候设置ContentType为application/json时会请求两次?其实JQuery的文档对此有做说明。
contentType (default: 'application/x-www-form-urlencoded; charset=UTF-8')
Type: Boolean or String
When sending data to the server, use this content type. Default is "application/x-www-form-urlencoded; charset=UTF-8", which is fine for most cases. If you explicitly pass in a content-type to $.ajax(), then it is always sent to the server (even if no data is sent). As of jQuery 1.6 you can pass false to tell jQuery to not set any content type header. Note: The W3C XMLHttpRequest specification dictates that the charset is always UTF-8; specifying another charset will not force the browser to change the encoding. Note: For cross-domain requests, setting the content type to anything other than application/x-www-form-urlencoded, multipart/form-data, or text/plain will trigger the browser to send a preflight OPTIONS request to the server.
注意Note后面的描述,在跨域的时候,除了contentType为application/x-www-form-urlencoded,multipart/form-data或者text/plain外,都会触发浏览器先发送方法为OPTIONS的请求。
比如说,你原来的请求是方法方法POST,如果第一个请求返回的结果Header中的Allow属性并没有POST方法,那么第二个请求是不会发送的,此时浏览器控制台会报错,告诉你POST方法并不被服务器支持。
图中箭头指向的Allow就是服务器返回的支持的方法。
不仅如此,如果想要用ContentType:application/json发送跨域请求,服务器端还必须设置一个名为Access-Control-Allow-Headers的Header,将它的值设置为 Content-Type,表明服务器能够接收到前端发送的请求中的ContentType属性并使用它的值。否则第二次请求也是发不出去的,浏览器console会报错,并提示你服务器没有设置Access-Control-Allow-Headers。
对应到我java程序的filter过滤器里是这样
- public class MyFilter implements Filter {
- @Override
- public void destroy() {
- //System.out.println("过滤器销毁");
- }
- @Override
- public void doFilter(ServletRequest request, ServletResponse response,
- HttpServletRequest httpRequest = (HttpServletRequest) request;
- String type=httpRequest.getMethod();
- if (type.toUpperCase().equals("OPTIONS")==true) {
- httpResponse.setHeader("Access-Control-Allow-Headers", "content-type, accept");
- 15 httpResponse.setHeader("Access-Control-Allow-Methods", "POST");
- 16 httpResponse.setStatus(200);
- 17 httpResponse.setContentType("text/plain;charset=utf-8");
- 18 httpResponse.setCharacterEncoding("utf-8");
- responseContentByte="{\"test\":\"OPTIONS\"}".getBytes();
- }
- }
- @Override
- public void init(FilterConfig arg0) throws ServletException {
- //System.out.println("过滤器初始化");
- }
- }
Ajax跨域之ContentType为application/json请求失败的问题的更多相关文章
- Ajax 跨域,这应该是最全的解决方案了
https://segmentfault.com/a/1190000012469713 前言 从刚接触前端开发起,跨域这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过N个跨域相关的问题了 ...
- ajax跨域,这应该是最全的解决方案了
前言 从刚接触前端开发起,跨域这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过N个跨域相关的问题了,16年时也整理过一篇相关文章,但是感觉还是差了点什么,于是现在重新梳理了一下. 个人见 ...
- ajax 跨域----好用的解决方案
一.前言 跨域这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过N个跨域相关的问题了! 但是感觉还是差了点什么,于是现在重新梳理了一下.个人见识有限,如有差错,请多多见谅 二.前言 关于跨 ...
- ajax跨域 (转)
题纲 关于跨域,有N种类型,本文只专注于ajax请求跨域(,ajax跨域只是属于浏览器”同源策略”中的一部分,其它的还有Cookie跨域iframe跨域,LocalStorage跨域等这里不做介绍), ...
- Ajax跨域解决方案大全
题纲 关于跨域,有N种类型,本文只专注于ajax请求跨域(,ajax跨域只是属于浏览器"同源策略"中的一部分,其它的还有Cookie跨域iframe跨域,LocalStorage跨 ...
- 一篇关于ajax跨域问题的解决方案
这几天没事,我有一个好友,让我帮他做一个机器人对话demo, 我说 看看有没有时间(其实自己一脸懵逼) 然后百度了一下,发现了一个机器人 -(连接就不弄出来了,可以私底下交流) ,,我是用这个的 好 ...
- Ajaxadr ajax跨域请求crossdomain
最近工作需要用到ajax跨域请求参数,网上找很很久,最终得到解决之道.分享一下吧,希望能帮到各位 也许你已经发现在浏览器直接敲路径能获得对方提供接口的参数,而一到项目中Ajax请求却老是失败.原因是, ...
- JQuery.Ajax + 跨域 (crossDomain) + POST + JSON + WCF RESTful, 5大陷阱和解决方案
JQuery.Ajax + 跨域 (crossDomain) + POST + JSON + WCF RESTful, 5大陷阱和解决方案 最近在开发WSS RESTful服务的时候, 碰到了这些个纠 ...
- 说说JSON和JSONP,浅析JSONP解决AJAX跨域问题
说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可以通过服 ...
随机推荐
- 对Java配置文件中敏感信息进行加解密的工具类
在 JavaEE 配置文件中,例如 XML 或者 properties 文件,由于某些敏感信息不希望普通人员看见,则可以采用加密的方式存储,程序读取后进行解密. 常见的如: 数据库用户密码,短信平台用 ...
- 一张图了解cocos2d坐标系
一张图了解cocos2d坐标系 平面直角坐标系
- ERP-非财务人员的财务培训教(一.一)------基本会计知识
一.基本会计知识 第一节 会计是企业的语言 反映企业经济状况的两组会计语言词汇 四个层次的会计语言规则 财务会计报告的组成 会计语言要素 会计工作主要是把企业杂乱的会计数据归纳整理,加工编制成有用的财 ...
- 【Java编程】Java在dos窗口编译与执行的批处理
最近在Java编程过程中,常用到dos窗口对程序进行编译与运行.但是不方便之处在于每次都要输入命令进入将要编译的程序的目录(其实也有简单的方法,在文章末尾给出).于是编写了一个配置文件,可以一次修改, ...
- c语言部分库函数,代码实现,以及细节理解
代码来自: http://blog.csdn.net/v_JULY_v //得9 分 //为了实现链式操作,将目的地址返回,加2 分! char * strcpy( char *strDest, co ...
- linux下显示不规则图片窗口
测试环境是ubuntu15.04,使用的图形库是gtk+. 图片格式采用的是X11的xpm格式,首先从网上找一个背景透明的png图片,然后用图形转换工具(比如gimp)转换为xpm格式. 程序代码如下 ...
- 关于IOS开发的基本书籍推荐
1. Sams Teach Yourself iOS 5 Application Development in 24 Hours<img src="https://pic4.z ...
- 我的.net并发系列文章及项目经验整理
一直在关注研究.net下的并发处理,之前也发布过几篇文章,今天就都整理下. 使用BlockingCollection来做并发处理,同时增加并发队列来做并发处理时的退出判断: 你真的知道.NET Fra ...
- scrollWidth,clientWidth与offsetWidth的区别
scrollWidth 是对象的实际内容的宽,不包边线宽度,会随对象中内容的多少改变(内容多了可能会改变对象的实际宽度). clientWidth 是对象可见的宽度,不包滚动条等边线,会随窗口的显 ...
- ORACLE复杂查询之连接查询
一.传统的连接查询 1.交叉连接:返回笛卡尔积 WHERE中限定查询条件,可以预先过滤掉掉不符合条件的记录,返回的只是两个表中剩余记录(符合条件的记录)的笛卡尔积. 2.内连接:参与连接的表地位平等, ...