从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:

@Component
public 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", "");
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请求的更多相关文章

  1. AJAX的来龙去脉(由来)-如何被封装出来的--ajax发送异步请求(四步操作)

    <黑马程序员_超全面的JavaWeb视频教程vedio\JavaWeb视频教程_day23_ajax> \JavaWeb视频教程_day23_ajax\day23ajax_avi\14.打 ...

  2. Ajax发送XML请求案例

    Ajax发送XML请求需求: 根据输入的国家,输出这些国家下面的城市. 如果请求参数较多,而且请求参数的结构关系复杂,则可以考虑发送XML请求.XML请求的实质还是POST请求,只是在发送请求的客户端 ...

  3. Ajax发送Post请求

    Ajax发送post请求与发送get请求大致类似.以下看详细实例.首先看JSP显示页面: <form action="servlet/LoginServlet" method ...

  4. 使用Ajax发送http请求(get&post请求)

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 同步和异步 同步和异步的概念 同步:必须等待前面的任务完成,才能继续后面 ...

  5. AJAX发送PUT请求引发的血案

    如果直接发送ajax=put形式的请求      是拿不到请求体中的数据的.           Tomcat:              1.将请求体中的数据,封装一个map             ...

  6. Ajax发送POST请求对数据的封装

    Ajax发送POST请求把数据到后端后,后端收到数据并解析出来 示列一: Ajax发送请求,这里主要是发送一个数组的数据类型到后端,如果没有先把数组进行格式化成字符串的话,后端就收了就是一个字符串类型 ...

  7. 原生JS实现ajax 发送post请求

    1. [代码]原生JS实现ajax 发送post请求 <script> var oStr = ''; var postData = {}; var oAjax = null; //post ...

  8. IT兄弟连 JavaWeb教程 使用AJAX发送POST请求并获取响应

    POST请求用于向服务器发送应该被保存的数据,因此POST请求天然比GET请求多需要一份需要被保存的数据.那么这些数据应该放在何处呢?毕竟,我们的open()方法接收的三个参数都没有合适的位置. 答案 ...

  9. IT兄弟连 JavaWeb教程 使用AJAX发送GET请求并获取响应

    GET请求用于获取数据,有时候我们需要获取的数据需要通过"查询参数"进行定位,在这种情况下,我们会将查询参数追加到URL的末尾,令服务器解析. 使用Ajax发送GET请求非常简单, ...

随机推荐

  1. 洛谷 - P1891 - 疯狂LCM - 线性筛

    另一道数据范围不一样的题:https://www.cnblogs.com/Yinku/p/10987912.html $F(n)=\sum\limits_{i=1}^{n} lcm(i,n) $ $\ ...

  2. VR相关网站

    VR87870 http://www.87870.com/ VR玩家网 http://www.vrwanjia.cn/ VR之家 http://www.vr.cn/ http://gad.qq.com ...

  3. 新版蜀山剑侠传3D立体格斗全方位剖析

    国人终极格斗<蜀山剑侠传>,突破传统横版格斗"二次元"瓶颈,率先开辟3D立体横版格斗网游先河,实现"有纬度"的空间化立体式全景3D战斗体验!游戏大量 ...

  4. 多次页面跳转后pop回主界面的问题

    最近写代码的时候出了点BUG, 查阅资料后终于解决了. 问题原因大概是: 项目中所有的viewController都是继承自一个封装好的viewController. navigationbar, n ...

  5. Git - .gitignore文件的用法

    .gitignore文件的作用 .gitignore文件用来忽略被指定的文件或文件夹的改动,被记录在.gitignore文件里的文件或文件夹,是无法被git跟踪到的,换句话说,被忽略的文件是不会被放入 ...

  6. ie img 3px bug

    ie img 3px bug 日期:2008-11-22 分类:CSS ie img 有 3px 的缝隙也是 ie 的经典 bug 之一,相信已经不陌生了,但还是先看看效果吧(也许你并没有见过): 效 ...

  7. iOS开发:创建推送开发证书和生产证书,以及往极光推送官网上传证书的步骤方法

    在极光官网上面上传应用的极光推送证书的实质其实就是上传导出的p12文件,在极光推送应用管理里面,需要上传两个p12文件,一个是生产证书,一个是开发证书 ,缺一不可,具体如下所示: 在开发者账号里面创建 ...

  8. C# 面向对象之面向接口

    接口的定义 与类不同的是接口用interface关键字 (1)接口中所有成员不能添加任何修饰符,默认为public,如果显示指定修饰符将会出现编译错误; (2)接口中不能包含字段.运算符重载.实例构造 ...

  9. Git本地分支与远程分支关联

    当clone完版本库,切换到开发分支后,使用git pull -r 拉取并合并分支之后会出现一下提示: $ git pull -rFrom ssh://192.168.1.226:29418/etha ...

  10. Codeforces Round #542(Div. 2) B.Two Cakes

    链接:https://codeforces.com/contest/1130/problem/B 题意: 给定n和 2 * n个数,表示i位置卖ai层蛋糕, 有两个人在1号,必须严格按照1-n的顺序买 ...