從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請求就可以順利的發出了。

Ajax 發送OPTION請求