Ajax 发送OPTION请求

Posted 2020-10-10 飞翔梦想

从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", "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请求就可以顺利的发出了。