angular5 + springmvc 跨域访问出错： Request header field token is not allowed by Access-Control-Allow-Heade

angular5 + springmvc 跨域访问出错： Request header field token is not allowed by Access-Control-Allow-Headers in preflight response

CORS，CrossOrigin Resources Sharing，也即跨源资源共享，是 HTML5 的一项特性，它定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。

通过服务器增加一个特殊的Header[Access-Control-Allow-Origin]来告知客户端跨域的限制，如果浏览器支持CORS的话，如果判断Origin通过的话，就会允许XHR进行请求，而不需要再使用jsonP或者代理文件。

使用这个Header返回被允许请求跨域请求的来源域，例如网站duelist.cn设置了下面的Header

Access-Control-Allow-Origin: http://smdcn.net

这样设置之后，通过http://smdcn.net下的页面对于duelist.cn进行ajax请求就会被允许，而其他网站对duelist.cn依旧会被阻拦，通过这种方式网站拥有者可以自己对此进行限制。

当然，如果不想限制来源，可以通过

Access-Control-Allow-Origin: *

来允许任何站点对该资源进行跨域请求

---

定义拦截器类：

package com.cy.cloudblock.filter;

import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Component;

@Component
public class SimpleCORSFilter implements Filter {
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
            throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        response.addHeader("Access-Control-Allow-Origin", "*");
        response.addHeader("Access-Control-Allow-Methods", "POST,GET,OPTIONS,PUT,DELETE");
        response.addHeader("Access-Control-Allow-Headers", "Authentication,Origin, X-Requested-With, Content-Type, Accept,token");


        chain.doFilter(req, res);
    }

    public void init(FilterConfig filterConfig) {
    }

    public void destroy() {
    }
}

其中‘Access-Control-Allow-Origin’设置为‘*’，允许所有地址访问。 
‘Access-Control-Allow-Headers’设置比较特殊，如果基础参数设置完成后依然报类似：“Request header field tokenis not allowed by Access-Control-Allow-Headers in preflight response.”这样的错误，我们就需要把缺少的字段信息补充进去。

---

web.xml 配置：

<filter>
  <filter-name>cors</filter-name>
  <filter-class>com.cy.cloudblock.filter.SimpleCORSFilter</filter-class>  
</filter>
<filter-mapping>
  <filter-name>cors</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>