Tomcat Access-Control-Allow-Origin（同源策略）实践

背景描述

使用tomcat配置cdn服务器时，css文件能正常加载，但是加载字体文件时出现了Access-Control-Allow-Origin错误：

已拦截跨源请求：同源策略禁止读取位于 http://localhost:9999/font-awesome/fonts/fontawesome-webfont.woff2?v=4.5.0 的远程资源。（原因：CORS 头缺少 'Access-Control-Allow-Origin'）。（未知）
downloadable font: download failed (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed source: http://localhost:9999/font-awesome/fonts/fontawesome-webfont.woff2?v=4.5.0

原因是tomcat禁止了跨域请求。关于HTTP访问控制的详细信息可以查看：HTTP访问控制(CORS)

解决方案

war应用

对于标准的war项目包，只需要增加一个filter就能取消Access-Control-Allow-Origin（以下简称CORS）的限制。

首先新建filter类

package com.itxc.filter;

import javax.servlet.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class CORSFilter implements Filter {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;
        httpResponse.addHeader("Access-Control-Allow-Origin", "*");
        filterChain.doFilter(servletRequest, servletResponse);
    }

    @Override
    public void destroy() {

    }
}

然后在web.xml中使用上述filter即可

<filter>
    <filter-name>CorsFilterfilter-name>
    <filter-class>com.itxc.filter.CORSFilterfilter-class>
filter>

<filter-mapping>
    <filter-name>CorsFilterfilter-name>
    /*
filter-mapping>

参考：tomcat添加跨域访问功能-Access-Control-Allow-Origin:*

内嵌Tomcat（Spring boot）

对于Spring Boot开发的项目，原理一样，只需要为Spring MVC添加一个Filter即可。

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

import javax.servlet.Filter;

@Configuration
public class SpringMvcConfig {

    /**
     * 解决同源策略问题的filter
     * @return
     */
    @Bean
    public Filter corsFilter(){
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.addAllowedOrigin("*");
        config.addAllowedHeader("*");
        config.addAllowedMethod("OPTIONS");
        config.addAllowedMethod("HEAD");
        config.addAllowedMethod("GET");
        config.addAllowedMethod("PUT");
        config.addAllowedMethod("POST");
        config.addAllowedMethod("DELETE");
        config.addAllowedMethod("PATCH");
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

重启Application即可。

扩展阅读：apache和nginx配置

要达到同样的目标，ngnix下可以这样配置：

server {
...
# Fix @font-face cross-domain restriction in Firefox
location ~* \.(ttf|ttc|otf|eot|woff|font.css)$ {
add_header Access-Control-Allow-Origin "http://yoursite.com";  #或* 代表任何域
#add_header Access-Control-Allow-Headers X-Requested-With;
#add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
}
...
}

apache（http.conf文件）配置：

<Directory "C:/htdocs">
    #Require all denied
    Header set Access-Control-Allow-Origin *
</Directory>