解决跨域问题总结

这两天解决了一个跨域问题,发现跨域有很多细节性的东西需要注意。

如果发现一个请求没有任何相应,报ERR_INSECURE_RESPONS,提示如下图(不同浏览器可能提示不同):

一般情况下就是跨域问题了,解决这类问题一般可以有三种方式:前端改用JSONP,nginx转发,后端代码配置。

我一般都用后端代码配置,耦合性小,而且通用性强。

但是如果发现报错是如下图:

一般是加载了多个CORS导致的,可以检查是不是有多个,去掉多余的,只留一个。

也有可能会遇到这样的问题,你的浏览器能访问,而别人的浏览器或者你的别的浏览器不能访问,这一般是由于你这个浏览器对这个网站授信过,就像你单独访问这个网站的接口,然后提示你不安全,你点击高级继续访问一样。

CORS测试的话是可以在本地进行的,下面贴出测试代码,打开访问即可看是否有跨域问题:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
        function crosRequest(){
            $.ajax({
                url:'https://你的网址/basic/service/query',
                type:'get',
                dataType:'text',
                success:function(data){
                    alert(data);
                }
            });
        }
    </script>
</head>
<body>
    <button onclick="crosRequest()">request</button>
</body>
</html>

下面贴上解决跨域问题的代码:


@Component
public class MyCORSConfig{

   
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
    
        return corsConfiguration;
    }

    /**
     * 跨域过滤器
     *
     * @return
     */
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig()); // 4
        return new CorsFilter(source);
    }
}

如果前端有Access-Control-Allow-Credentials=true的head头,那么在buildConfig()方法里还要配置corsConfiguration.setHeader("Access-Control-Allow-Credentials", "true");

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值