解决跨域问题总结

最新推荐文章于 2024-06-05 00:40:27 发布

jiang_zf

最新推荐文章于 2024-06-05 00:40:27 发布

阅读量319

点赞数

分类专栏：后端 SpringBoot 我踩过的坑文章标签：跨域 ERR_INSECURE_RESPONS The 'Access-Control-Allow-Orig

本文链接：https://blog.csdn.net/jiang_zf/article/details/88131730

版权

后端同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

我踩过的坑

6 篇文章 0 订阅

订阅专栏

SpringBoot

3 篇文章 0 订阅

订阅专栏

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

如果发现一个请求没有任何相应，报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");

jiang_zf

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
解决跨域问题总结

这两天解决了一个跨域问题，发现跨域有很多细节性的东西需要注意。如果发现一个请求没有任何相应，报ERR_INSECURE_RESPONS，提示如下图（不同浏览器可能提示不同）:一般情况下就是跨域问题了，解决这类问题一般可以有三种方式：前端改用JSONP，nginx转发，后端代码配置。我一般都用后端代码配置，耦合性小，而且通用性强。但是如果发现报错是如下图：一般是加载了多个CO...
复制链接

扫一扫

专栏目录