跨域無效問題解決（java後端方案）
阿新 • • 發佈：2022-04-18
通用後端跨域方法
1、@CrossOrigin 註解
在Spring Boot 中給我們提供了一個註解 @CrossOrigin 來實現跨域，這個註解可以實現方法級別的細粒度的跨域控制。我們可以在類或者方新增該註解，如果在類上新增該註解，該類下的所有介面都可以通過跨域訪問，如果在方法上添加註解，那麼僅僅只限於加註解的方法可以訪問。
@Slf4j @RestController @RequestMapping(value = AppPath.SERVICE_LOCATION_URL + "/appointment") @Api(value = "AppointmentController",tags = "預約列表介面") @CrossOrigin public class AppointmentController { @Autowired private LiveAppointmentService appointmentService; @RequestMapping @ApiOperation(value = "預約列表分頁查詢", response = CsLiveAppointmentDTO.class) public JsonResult<PageInfo> getAppointmentList(AppointmentListDTO dto){ log.info("getAppointmentList vo:{}", JSONUtil.toJsonStr(dto)); PageInfo<CsLiveAppointmentDTO> appointmentList = appointmentService.getAppointmentList(dto); return JsonResult.success(appointmentList); } }
**@CrossOrigin 註解不生效問題**
在Spring框架4.2版本後，Spring給出了註解的方式解決問題。
即在Controller控制器中，在Controller註解上方新增@CrossOrigin註解。
但是使用這種方式後也有可能仍然出現跨域問題，解決方案就是：
**在@RequestMapping註解中沒有指定Get、Post方式，或者使用@GetMapping或者@Post Mapping**
**在@CrossOrigin(methods = {RequestMethod.POST})指定方法**
@Slf4j @RestController @RequestMapping(value = AppPath.SERVICE_LOCATION_URL + "/appointment") @Api(value = "AppointmentController",tags = "預約列表介面") @CrossOrigin public class AppointmentController { @Autowired private LiveAppointmentService appointmentService; @ApiOperation(value = "預約列表分頁查詢", response = CsLiveAppointmentDTO.class) //@GetMapping("getList") @RequestMapping(method = RequestMethod.GET) public JsonResult<PageInfo> getAppointmentList(AppointmentListDTO dto){ log.info("getAppointmentList vo:{}", JSONUtil.toJsonStr(dto)); PageInfo<CsLiveAppointmentDTO> appointmentList = appointmentService.getAppointmentList(dto); return JsonResult.success(appointmentList); } }
2、springboot2.0 實現WebMvcConfigurer 實現跨域
@Configuration public class WebMvcConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowedMethods("POST","GET","OPTIONS") .allowedHeaders("*") .allowCredentials(false).maxAge(3600); } }
3、過濾器實現跨域
@WebFilter(filterName = "CorsFilter") @Configuration @Order(Ordered.HIGHEST_PRECEDENCE) @Slf4j public class CorsFilter implements Filter { @Value("${allow.headers:X-Requested-With,Authorization,Content-Type}") private String allowHeaders; @Value("${allow.origin:https://xxx.com}") private String allowOrigin; @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-Origin", "http://xxx:9091"); response.setHeader("Access-Control-Allow-Credentials", "true"); response.setHeader("Access-Control-Allow-Methods", "POST, GET, PATCH,OPTIONS, DELETE, PUT"); response.setHeader("Access-Control-Max-Age", "3600"); response.setHeader("Access-Control-Allow-Headers", allowHeaders); // response.setHeader("Access-Control-Allow-Headers", "*"); log.info("CorsFilter res {},{}", response.getHeader("Access-Control-Allow-Origin"), response.containsHeader("Access-Control-Allow-Origin")); chain.doFilter(req, res); } }
**跨域不生效問題**
（1）、@Order(Ordered.HIGHEST_PRECEDENCE)如果有登入攔截，要將跨域filter等級提升為最高優先順序
（2）、 response.setHeader("Access-Control-Allow-Headers", "*");
Access-Control-Allow-Headers: * 在部分客戶端上有相容問題，MDN中介紹 Access-Control-Allow-Headers: * 有兩重意思。
一個是在服務端設定Access-Control-Allow-Credentials: true的時候這個 * 只會被客戶端當做字串 * （我們不希望的，會出錯的）。
另一個是沒有這個設定則會被當做萬用字元（我們希望的，不會出錯的）。
猜測是客戶端對於 * 的實現上有相容性問題，所以建議不要這樣設定，用到什麼設定什麼最好，例如：Access-Control-Allow-Headers: Content-Type,X-Requested-With,Authorization。
（3）、 response.setHeader("Access-Control-Allow-Origin", "*")
//指定允許其他域名訪問
'Access-Control-Allow-Origin:http://172.80.0.206'//一般用法（*，指定域，動態設定），3是因為*不允許攜帶認證頭和cookies
//是否允許後續請求攜帶認證資訊（cookies）,該值只能是true,否則不返回
（4）、 response.setHeader("Access-Control-Allow-Methods", "POST, GET, PATCH,OPTIONS, DELETE, PUT");OPTIONS 在**預檢請求**複雜請求中也會使用到
（5）、 如果有spring security結合使用需要新增該過濾器
@Configuration public class SecurityConfig extends WebSecurityConfigurerAdapter { @Override protected void configure(HttpSecurity security) throws Exception { security.csrf().disable(); security.headers().frameOptions().disable(); //加入過濾器 security.addFilterBefore(new CORSFilter(), UsernamePasswordAuthenticationFilter.class); } }
4、定製化引數實現跨域
前面要麼是*,實際需求是根據業務引數定製化
@WebFilter(filterName = "corsFilter", urlPatterns = "/*", initParams = {@WebInitParam(name = "allowOrigin", value = "*"), @WebInitParam(name = "allowMethods", value = "GET,POST,PUT,DELETE,OPTIONS"), @WebInitParam(name = "allowCredentials", value = "true"), @WebInitParam(name = "allowHeaders", value = "Content-Type,X-Token")}) public class CorsFilter implements Filter { private String allowOrigin; private String allowMethods; private String allowCredentials; private String allowHeaders; private String exposeHeaders; @Override public void init(FilterConfig filterConfig) throws ServletException { allowOrigin = filterConfig.getInitParameter("allowOrigin"); allowMethods = filterConfig.getInitParameter("allowMethods"); allowCredentials = filterConfig.getInitParameter("allowCredentials"); allowHeaders = filterConfig.getInitParameter("allowHeaders"); exposeHeaders = filterConfig.getInitParameter("exposeHeaders"); } @Override public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException { HttpServletRequest request = (HttpServletRequest) servletRequest; HttpServletResponse response = (HttpServletResponse) servletResponse; if (!StringUtils.isEmpty(allowOrigin)) { if(allowOrigin.equals("*")){ // 設定哪個源可以訪問 response.setHeader("Access-Control-Allow-Origin", allowOrigin); }else{ List<String> allowOriginList = Arrays.asList(allowOrigin.split(",")); if (allowOriginList != null && allowOriginList.size() > 0) { String currentOrigin = request.getHeader("Origin"); if (allowOriginList.contains(currentOrigin)) { response.setHeader("Access-Control-Allow-Origin", currentOrigin); } } } } if (!StringUtils.isEmpty(allowMethods)) { //設定哪個方法可以訪問 response.setHeader("Access-Control-Allow-Methods", allowMethods); } if (!StringUtils.isEmpty(allowCredentials)) { // 允許攜帶cookie response.setHeader("Access-Control-Allow-Credentials", allowCredentials); } if (!StringUtils.isEmpty(allowHeaders)) { // 允許攜帶哪個頭 response.setHeader("Access-Control-Allow-Headers", allowHeaders); } if (!StringUtils.isEmpty(exposeHeaders)) { // 允許攜帶哪個頭 response.setHeader("Access-Control-Expose-Headers", exposeHeaders); } filterChain.doFilter(servletRequest, servletResponse); } @Override public void destroy() { } }
5、 使用SpringCloud閘道器GateWay實現跨域
原理和前面類似
@Configuration public class CorsConfig { @Bean public CorsWebFilter corsFilter() { CorsConfiguration config = new CorsConfiguration(); config.setAllowCredentials(Boolean.TRUE);//允許Cookie跨域 config.addAllowedMethod("*"); config.addAllowedOrigin("*"); config.addAllowedHeader("*");//不要設定成*,參考前面 UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(new PathPatternParser()); source.registerCorsConfiguration("/**", config); return new CorsWebFilter(source); } }
注：在下層服務不需要在做任何跨域配置，例如註解@CrossOrigin，否則會由於配置衝突導致依然出現跨域問題
6、nginx配置代理解決跨域問題
server { listen 8000; server_name localhost; # / 表示匹配路徑為/的url location / { proxy_pass http://需要跨域的域名:5500; } # /user 表示訪問以/user 開頭 的地址 如/username,/user/find等 location /user { proxy_pass http://需要跨域的域名:3000; } }
7、nginx配置響應頭允許跨域
# # Wide-open CORS config for nginx # location / { #### 對OPTIONS請求，會設定很多的請求頭，並返回204 if ($request_method = 'OPTIONS') { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; # # Custom headers and headers various browsers *should* be OK with but aren't # add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range'; # # Tell client that this pre-flight info is valid for 20 days # add_header 'Access-Control-Max-Age' 1728000; add_header 'Content-Type' 'text/plain; charset=utf-8'; add_header 'Content-Length' 0; return 204; } if ($request_method = 'POST') { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range'; add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range'; } if ($request_method = 'GET') { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range'; add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range'; } }
參考來源如下：
> https://blog.csdn.net/weixin_40910372/article/details/100068498
> https://blog.csdn.net/letterTiger/article/details/105939465
> https://blog.csdn.net/liao0801_123/article/details/103459241
> https://blog.csdn.net/f641385712/article/details/101170214
> https://blog.csdn.net/qq_36155003/article/details/114540029