方式一:Tomcat 容器配置cors 跨域Filter(Tomcat安裝目錄/conf/web.xml文件)
備註:此爲Tomcat8 以上版本:
<filter>
<filter-name>CorsFilter</filter-name>
<filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
<init-param>
<param-name>cors.allowed.origins</param-name>
<param-value>*</param-value>
</init-param>
<init-param>
<param-name>cors.allowed.methods</param-name>
<param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
</init-param>
<init-param>
<param-name>cors.allowed.headers</param-name>
<param-value>*</param-value>
</init-param>
<init-param>
<param-name>cors.support.credentials</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CorsFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
方式二: SpringBoot Web項目配置添加CORS跨域
方法一、全局cors配置:
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;
@Configuration
public class CorsConfig {
@Bean
public CorsFilter corsFilter() {
final UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
final CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.setAllowCredentials(true);
corsConfiguration.addAllowedOrigin("*");
corsConfiguration.addAllowedHeader("*");
corsConfiguration.addAllowedMethod("*");
urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
return new CorsFilter(urlBasedCorsConfigurationSource);
}
}
方法二、添加cors配置類
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;
@Configuration
public class WebMvcConfig extends WebMvcConfigurationSupport {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
.maxAge(3600)
.allowCredentials(true);
}
}
方法三、使用Filter方法,還需要在啓動類加上@ServletComponentScan註解
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebFilter(urlPatterns = "*")
public class CorsFilter implements Filter {
@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain filterChain) throws IOException, ServletException {
HttpServletRequest httpRequest = (HttpServletRequest)request;
HttpServletResponse httpResponse = (HttpServletResponse) response;
httpResponse.setCharacterEncoding("UTF-8");
httpResponse.setContentType("application/json; charset=utf-8");
httpResponse.setHeader("Access-Control-Allow-Origin", "*");
httpResponse.setHeader("Access-Control-Allow-Credentials", "true");
httpResponse.setHeader("Access-Control-Allow-Methods", "*");
httpResponse.setHeader("Access-Control-Allow-Headers", "Content-Type,Authorization");
httpResponse.setHeader("Access-Control-Expose-Headers", "*");
filterChain.doFilter(httpRequest, httpResponse);
}
@Override
public void destroy() {
}
}
方式三、nginx配置cors 跨越
server {
listen 8090;
server_name 127.0.0.1 localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root E:/nginx-1.15.0/ssm;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location ~/ssm{
#Proxy Settings 跨域配置
add_header Access-Control-Allow-Origin $http_origin;
add_header Access-Control-Allow-Headers *;
add_header Access-Control-Allow-Methods *;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
proxy_max_temp_file_size 0;
proxy_connect_timeout 90;
proxy_send_timeout 90;
proxy_read_timeout 90;
proxy_pass http://127.0.0.1:8700;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
通過上述配置cors 配置方式,就可以解決Web 項目的跨域問題。
Web 跨域問題實戰:
前提描述:公司的最新項目採用微服務(SpringBoot) + Vue(前端框架) + Cas5 單點服務器進行項目的架構和研發,在實際情況部署時,發生相關的跨越問題。重點在於:springboot 微服務項目調用cas5 rest 的協議發生跨域問題。
解決問題過程:
第一步:cas5 服務端的容器Tomcat 配置cors 跨域Filter ,且微服務SpringBoot 項目也配置cors 跨域的配置類
但是,微服務項目調用cas 5 單點服務器rest 協議生成Ticket憑證時(tgt),還是提示存在跨域問題的產生,
第二步:爲nginx 代理的springboot 微服務項目和cas 5 單點項目配置cors 跨域配置
server {
listen 8090;
server_name 127.0.0.1 localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root E:/nginx-1.15.0/ssm;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location ~/gcxt {
#Proxy Settings 跨域配置
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers *;
add_header Access-Control-Allow-Methods *;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
proxy_max_temp_file_size 0;
proxy_connect_timeout 90;
proxy_send_timeout 90;
proxy_read_timeout 90;
proxy_pass http://127.0.0.1:8715;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
server {
listen 8098;
server_name 127.0.0.1 localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location ~/cas {
#Proxy Settings 跨域配置
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers *;
add_header Access-Control-Allow-Methods *;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
proxy_max_temp_file_size 0;
proxy_connect_timeout 90;
proxy_send_timeout 90;
proxy_read_timeout 90;
proxy_pass http://127.0.0.1:8714;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
但是還是提示錯誤信息
Access to XMLHttpRequest at 'http://192.168.1.173:8098/cas/v1/tickets' from origin 'http://192.168.1.173:8090' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values 'http://192.168.1.173:8090, *', but only one is allowed.
上述的錯誤信息描述了:允許訪問的地址有多個,但只能允許一個用戶登入。
我調整後的ngixn 相關代理項目的配置:
server {
listen 8090;
server_name 127.0.0.1 localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root E:/nginx-1.15.0/gcxt;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location ~/gcxt {
#Proxy Settings 跨越配置
add_header Access-Control-Allow-Origin $http_origin;
add_header Access-Control-Allow-Headers *;
add_header Access-Control-Allow-Methods *;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
proxy_max_temp_file_size 0;
proxy_connect_timeout 90;
proxy_send_timeout 90;
proxy_read_timeout 90;
proxy_pass http://127.0.0.1:8715;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
server {
listen 8098;
server_name 127.0.0.1 localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location ~/cas {
#Proxy Settings 移除跨域配置
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
proxy_max_temp_file_size 0;
proxy_connect_timeout 90;
proxy_send_timeout 90;
proxy_read_timeout 90;
proxy_pass http://127.0.0.1:8714;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
梳理:ssm 項目配置nginx 代理的cors 跨域配置,cas 項目移除nginx 代理的cors 跨域配置,轉而採用tomcat 配置的cors 跨域配置