Ajax 发送OPTION请求

从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请求

最新文章

热门文章