背景描述
使用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>CorsFilter</filter-name>
<filter-class>com.itxc.filter.CORSFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>CorsFilter</filter-name>
<url-pattern>/*</url-pattern>
</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>