WebStorm overflow join javafx webpack timer webforms bootstrap后台管理 郑州网站开发 jq遍历元素 oracle添加索引 matlab中axis mysql新增用户和权限 axure时间选择控件 oracle行转列函数 python相对路径怎么写 python实例教程 java基础语言 java方法重载 java获取时间 js分页 语音分析软件 大势至usb监控 跑马灯动态壁纸 php随机数函数 流媒体下载 onaccuracychanged 360越狱版 ps字体描边 微信群群发软件 3dmax材质编辑器 服务器备份软件 vue搭建项目 python去掉空格 网卡flash导入音乐 dns地址 qq三国辅助 mysql数据备份 php源代码 qq聊天窗口怎么合并
当前位置: 首页 > 学习教程  > 编程语言

1. Springboot解决跨域问题(Cors)

2020/10/16 17:58:11 文章标签:

一、什么是跨域访问 在前后端分离开发项目时,如果前端项目与后端项目部署在两个不同的域下,那么势必会引起跨域问题的出现。二、跨域访问的解决方案有哪些? 2.1.第一类方案:前端解决方案 JS跨域 这里所说的JS跨域,指的…

一、什么是跨域访问

   在前后端分离开发项目时,如果前端项目与后端项目部署在两个不同的域下,那么势必会引起跨域问题的出现。

二、跨域访问的解决方案有哪些?
2.1.第一类方案:前端解决方案
JS跨域

这里所说的JS跨域,指的是在处理跨域请求的过程中,技术面会偏浏览器端较多一些,一般是利用浏览器的一些特性进行hack处理,从而避开同源策略的限制。

JSONP

由于同源策略不会阻止动态脚本的插入到文档中去,所以催生出了一种很常用的跨域方式:JSONP(JSON with Padding)。

原理:浏览器对script的资源引用没有同源限制,同时资源加载到页面后会立即执行,所以通过动态插入script标签即可达到跨域的请求
特点:数据为json格式
缺点:不能post

<script>
    // 回调函数
    function getJsonp(data) {
       console.log(data);
    }
    let scriptObj = document.createElement('script');
    scriptObj.type = "text/javascript";
    scriptObj.src = "https://easy-mock.com/mock/5b9a1ff49746e0452c1a7354/example?callback=testjsonp";
    document.head.appendChild(scriptObj);
</script>

2.2.第二类方案:后端解决方案
一般在解决跨域问题时,更多的是后端进行配置进行跨域的解决。

2.2.1.重写WebMvcConfigurer的addCorsMappings方法(全局跨域配置)

@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter {

    /**
     * 解决跨域问题
     * @param registry
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedOrigins("*").allowedMethods("GET", "POST", "OPTIONS", "PUT")
                .allowedHeaders("Content-Type", "X-Requested-With", "accept", "Origin", "Access-Control-Request-Method",
                        "Access-Control-Request-Headers","accessToken")
                .exposedHeaders("Access-Control-Allow-Origin", "Access-Control-Allow-Credentials")
                .allowCredentials(true).maxAge(3600);
    }
}

2.2.2.使用CrossOrigin注解(局部跨域配置)
将CrossOrigin注解加在Controller层的方法上,该方法定义的RequestMapping端点将支持跨域访问

2.2.3.使用CorsFilter进行全局跨域配置

@Configuration
public class GlobalCorsConfig {
    @Bean
    public CorsFilter corsFilter() {

        CorsConfiguration config = new CorsConfiguration();
        //开放哪些ip、端口、域名的访问权限,星号表示开放所有域
        config.addAllowedOrigin("*");
        //是否允许发送Cookie信息
        config.setAllowCredentials(true);
        //开放哪些Http方法,允许跨域访问
        config.addAllowedMethod("GET","POST", "PUT", "DELETE");
        //允许HTTP请求中的携带哪些Header信息
        config.addAllowedHeader("*");
        //暴露哪些头部信息(因为跨域访问默认不能获取全部头部信息)
        config.addExposedHeader("*");
        //添加映射路径,“/**”表示对所有的路径实行全局跨域访问权限的设置
        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", config);
        return new CorsFilter(configSource);
    }
}

原文链接地址:https://t.1yb.co/6Bhs

微信扫一扫,获取更多精彩。
在这里插入图片描述


本文链接: http://www.dtmao.cc/news_show_300232.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?