跨域无效问题解决（java后端方案）

已于 2022-04-18 11:43:32 修改
阅读量4.4k 收藏 10
点赞数 1
分类专栏： 杂谈 文章标签： java spring spring boot
于 2022-03-10 15:57:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FLGBgo/article/details/123360364
版权

通用后端跨域方法

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实现跨域
原理和前面类似

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.reactive.CorsWebFilter;
import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource;
import org.springframework.web.util.pattern.PathPatternParser;

@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

FLGB
关注
专栏目录
解决Vue调用springboot接口403跨域问题
12-11
总结来说，解决Vue调用SpringBoot接口时的403跨域问题，关键在于配置后端以支持CORS。这通常涉及到在Controller或全局级别启用跨域，允许来自不同源的请求。通过这种方式，可以确保前后端的正常通信，推进项目的顺利...
使用CrossOrigin注解解决跨域问题无效的坑
Prayer96的博客
03-06 1199
在做在线教育项目前端开发部分条件的查询功能时，一点击查询按钮就出现跨域错误 原因：是因为在前端的查询表单中调用vue中methods里定义的方法时没有加上括号 加上后就没有跨域问题了 这是methods里定义的方法 ...
记录: 403 跨域检测无效, Nuxtjs,FastAdmin
Leon4055的博客
09-15 1855
前台技术栈使用的NuxtJs后台和接口使用的FastAdmin。
网页跨域异常100%解决（谷歌浏览器）
最新发布
weixin_42401291的博客
09-24 276
cess to XMLHttpRequest at 'http://192.168.1.104:3080/api/Login/Store' from origin 'http://yingyonglieren.imwork.net' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space `private`.ces
后端允许跨域后，前端访问仍然存在跨域问题
qq_45634989的博客
07-07 8152
后端允许跨域后，前端访问仍然存在跨域问题
java后端配置跨域不生效、无效
qq_51133939的博客
08-26 2369
java后端配置跨域不生效
【SpringBoot】MVC配置解决跨域但仍然存在跨域
沉迷写代码的程序猿的博客
11-26 2700
因此，应该是因为OPTIONS请求未携带token，被SpringMCV的拦截器拦截下来，导致预检请求（CORS 预检请求）未成功，因此报了跨域错误。通过后端日志发现两个无token均为OPTIONS请求，并且两个OPTIONS请求均无通过拦截器，因此我。发现后端已经允许跨域了。这里出现了两次缺少token，检查浏览器网络信息。第二个请求并无token，并且状态码为500。第一个请求携带了token，但是并未成功请求。发现这里有两次请求，点开第一个请求。在拦截器中打印一下请求的方式。
后端通过CorsRegistry对象配置了全局跨域，但是前端仍然报CORS跨域错误
热爱编程、热爱生活、热爱探索
07-29 4019
所以错误的跟本原因在于OPTIONS，由于我配置了登录拦截器，对于放行请求，不会有什么问题，但是对于没有放行的请求，会直接拦截OPTIONS请求，OPTIONS请求是一个探测请求，内部并不会携带token，所以就直接导致OTIONS请求被拦截，这样就会让浏览器觉得请求不可达，直接在前端报。在前后端分离的项目中，很容易出现跨域错误，因为前端和后端的端口号、主机名一般都不相同，此时前端能够发送请求给后端，但是由于同源策略的存在，会直接被浏览器给拦截。也可以配置跨域，我一般都是直接在后端配置跨域的，可以使用**
使用Spring CROS解决项目中的跨域问题详解
08-25
为了解决这个问题，开发者们不得不想出各种解决方案。其中，使用Spring CROS是其中的一种。 CROS（Cross-Origin Resource Sharing）是一种机制，允许浏览器从不同的域名中请求资源。Spring框架从4.2版本开始提供了...
React+Spring实现跨域问题的完美解决方法
08-27
在React前端通过代理配置解决开发环境的跨域问题，在Spring后端通过拦截器处理生产环境的跨域请求。注意，这些设置仅适用于允许特定源的跨域访问，若需允许所有源，可将`Access-Control-Allow-Origin`设置为`*`，但...
AJAX的跨域访问-两种有效的解决方法介绍
10-27
在实际应用中，选择合适的跨域解决方案需要综合考虑开发的便利性、数据安全以及对新技术的支持程度。在某些情况下，可能还需要与后端开发人员紧密合作，以确保所选择的方案既符合业务需求，又能保持系统的安全性和...
Springboot前后端分离项目配置跨域实现过程解析
08-18
为了解决这个问题，我们需要在后端配置跨域。 首先，我们需要了解什么是跨域。跨域是指在不同的域名、协议或端口之间的资源共享问题。当我们在前端发送请求到后端时，如果后端和前端不在同一个域名或端口上，浏览器...
设置了跨域，好像没生效？
emoji111111的博客
02-21 733
设置了跨域，好像没生效？
【跨域系】为何配置了corsFilter还是出现跨域问题
run_boy_2022的博客
04-20 2344
java代码解决这个问题，尤其是springboot项目，可以有很多种方式，我这里由于项目原因以及处于从web访问执行的流程上来说filter肯定是先执行的，直接就选择用filter来处理的。为了本地容易测试这个跨域问题，简单写了一个简单的html文件贴到这里来，当然关于页面需要的脚本jquery包 就大家需要自己来获取了。贴上上面的代码，理论上面springboot启动 之后，跨域问题应该就可以解决了，但是当我访问的时候还是会出现跨域的问题。虽然添加了跨域的配置，这里我的控制台竟然是跨域的问题。
Nginx 跨域
aob30631的博客
06-27 481
if ($request_method = 'OPTIONS') { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access...
解决 Spring Boot + Vue 前后端分离跨域配置无效的问题
有来技术
04-21 2317
本文通过实战配置 CORS 解决 SpringBoot 和 Vue 前后端跨域请求限制，再从原理上分析 CORS 配置为什么会在 Spring Security 场景下会失效以及如何解决。
【总结】vue跨域不成功的原因
GISer的顽强开发之路
12-11 2560
如果后端接口为：http://127:0:0:1:8000/api/getData/xx，而刚好代理设置为/api。在前后端分离式开发的项目中，常出现跨域问题，不同端口或者不同IP开发的前后端项目均会出现；
Chrome出现CORS跨域，后台代码解决了但是还是跨域问题
weixin_45960525的博客
08-11 4012
在高版本的Chrome下，浏览器默认是开启Block insecure private network requests.这个选项的。也就是默认禁止跨域请求，所以在访问一些没有符合最新标准的老网站时，可能会发现出现如图所示的CORS跨域请求错误，从而导致不能正确打开该网站。3、在目标输入框尾部加上 --disable-web-security --user-data-dir=C:\MyChromeDevUserData。将Default改成Disabled，此时浏览器会提示你重启，点击重启按钮即可。...
在spring boot+vue项目中@CrossOrigin 配置了允许跨域但是依然报错跨域，解决跨域请求的一次残酷经历
m0_64951177的博客
10-28 1314
前端报错，我一看哎跨域问题，于是后端配置允许跨域各种配置都不好使，问题排查OPTIONS请求不能带自定义token所有后端拦下来请求以后拿不到token，后端拿不到token就直接重定向到错误处理接口然后返回从错误处理接口中返回具体的错误情况，首先，说一下我们的项目情况，我们项目中后端有一个过滤器，如果必须要登录的接口路径会被拦下来检查，前端要传一个token，然后后端根据这个token来判断redis中这个用户是否已经登录。解决办法，判断token之前如果OPTIONS请求直接放行。
Java后端Ajax跨域问题实战与解决策略
本文将深入探讨Ajax跨域问题及其解决方案，通过两个实际的Java后端项目实例来演示这个问题及其解决方法。第一个项目是一个简单的订单管理系统，它运行在Tomcat的7070端口，提供一个RESTful API（如`/loadOrderList`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值