从fetch说起，用fetch构造一个POST请求。
fetch(‘http://127.0.0.1:8000/api/login‘, { ???method: "POST", ???headers: ({ ???????‘Content-Type‘: ‘application/x-www-form-urlencoded‘ ???}), ???body: "name=" + name + "&password=" + pwd}).then((res) = >{ ???console.log(res.status); ???return res.json()}).then((data) = >{ ???// console.log(data.result) ???let loginResult = data.result ???if (loginResult == ‘ok‘) { ???????dispatch(getSuccess(data.list)) browserHistory.push(‘/index‘) ???} else { ???????console.log("illegal login in !") ???}}).catch((e) = >{ ???console.log(e.message)})这个POST发出去，一切正常。
由于业务需要，我增加一个头字段：Authorization。
fetch请求的代码修改如下：
...headers: ({ ???‘Content-Type‘: ‘application/x-www-form-urlencoded‘, ???‘Authorization‘: ‘1111111222‘}),body: "name=" + name + "&password=" + pwd}).then((res) = >{...问题出现了，服务器收到一个OPTIONS请求？！
二、原因
这是fetch出于安全性考虑做的一次服务器预查询，而我的服务没有做相应的处理，所以业务处理失败了。
三、解决
方法：
手动写一个Filter：
@Componentpublic class CorsFilter implements Filter { ???@Override ???public void init(FilterConfig filterConfig) throws ServletException { ???????// TODO Auto-generated method stub ???} ???@Override ???public void doFilter(ServletRequest req, ServletResponse res, ???????FilterChain chain) throws IOException, ServletException { ???????HttpServletResponse response = (HttpServletResponse) res; ???????response.setHeader("Access-Control-Allow-Origin", "*"); ???????response.setHeader("Access-Control-Allow-Methods", ???????????"POST, GET, OPTIONS, DELETE"); ???????response.setHeader("Access-Control-Max-Age", "3600"); ???????response.setHeader("Access-Control-Allow-Headers", ???????????"Content-Type, x-requested-with, X-Custom-Header, Authorization"); ???????chain.doFilter(req, res); ???} ???@Override ???public void destroy() { ???????// TODO Auto-generated method stub ???}}一点说明：
response.setHeader("Access-Control-Allow-Headers", "Content-Type, x-requested-with, X-Custom-Header, Authorization");
配置中的Authorization是和请求中自定义的头部字段是一样的。
通过这个过滤器，fetch后续的POST请求就可以顺利的发出了。
Ajax 发送OPTION请求
原文地址：http://www.cnblogs.com/laneyfu/p/7667396.html