spring boot设置了Access-Control-Allow-Origin还是有跨域问题

最近使用spring cloud框架进行前后端分离开发,因为我们是通过网关去访问后台接口,ip
、端口都相同,所以没有出现过跨域问题,但是前端的同事把项目用webstrom打开以后(端口和ip就成了webstrom分配的)就有了跨域问题无法请求到后台,浏览器报"CORS 头缺少 'Access-Control-Allow-Origin'",但是我们已经在网关里设置了Access-Control-Allow-Origin为*,代码如下:

@Service
public class AuthFilter extends ZuulFilter {
    /**
     * 日志对象
     */
    private static final Logger logger = LoggerFactory.getLogger(AuthFilter.class);
    @Autowired
    private FilterConfig filterConfig;
    /**
     * redis缓存
     */
    @Autowired
    private RedisService redisService;
    @Override
    public boolean shouldFilter() {
        return true;
    }

    @Override
    public Object run() {
        RequestContext ctx = RequestContext.getCurrentContext();
        HttpServletRequest request = ctx.getRequest();
        HttpServletResponse response = ctx.getResponse();
        //解决浏览器跨域问题
        response.addHeader("Access-Control-Allow-Origin", "*");
        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
//        response.addHeader("Access-Control-Allow-Credentials", "true");
//        response.addHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, DELETE, OPTIONS, PATCH");
//        response.addHeader("Access-Control-Max-Age", "3600");
//        response.addHeader("Vary", "Origin");
        response.addHeader("Access-Control-Allow-Headers", "token,accesstoken,Content-type");
        //请求接口URL时登录token有效性校验
        return null;
    }

    @Override
    public String filterType() {
        return "pre";
    }

    @Override
    public int filterOrder() {
        return 0;
    }

}

对此我在本地随便写了个小项目还原了当时的情景,我把代码以及报错贴出来麻烦各位看一下哪里有不对的;
前端代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/jquery-1.9.1.min.js"></script>
    </head>
    <script>
        function t1(){
            $.ajax({
                url:'http://localhost:9001/xzw/say',
                type:'post',
                contentType : 'application/json;charset=utf-8', 
                dataType:'json',
                data : JSON.stringify({
                    batch_id : 'ncveirugheasolvgil'
                }),
                success : function(data){
                    alert('成功跨域');
                    alert(data);
                },
                error : function(){
                    alert('error');
                }
            })
        }
    </script>
    <body>
        <input type="button" value="测试跨域是否能获取数据" onclick="t1()"/>
    </body>
</html>

后台代码:

@RestController
@RequestMapping("/xzw")
public class PageDemoController {
    @RequestMapping("/say")
    public String say(HttpServletRequest request,HttpServletResponse response,@RequestParam(value="batch_id")String batch_id){
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.addHeader("Access-Control-Allow-Headers", "*");
        System.out.println("batch_id="+batch_id);


        return "hello world";
    }
}

浏览器报错

已拦截跨源请求:同源策略禁止读取位于 http://localhost:9001/xzw/say 的远程资源。(原因:CORS 头缺少 'Access-Control-Allow-Origin')。[详细了解]

已拦截跨源请求:同源策略禁止读取位于 http://localhost:9001/xzw/say 的远程资源。(原因:CORS 请求未能成功)。[详细了解]

我们项目里的拦截器原本除了设置Access-Control-Allow-Origin还有验证token的代码,前端如果先进行登陆然后在ajax请求的时候把token拿到放在header里就不会有跨域问题,我把token验证的代码去掉了就出现了跨域问题,但是我看验证token的逻辑判断对跨域没有什么特殊的处理,一下为拦截器原代码:

public Object run() {
        RequestContext ctx = RequestContext.getCurrentContext();
        HttpServletRequest request = ctx.getRequest();
        HttpServletResponse response = ctx.getResponse();
        //解决浏览器跨域问题
        response.addHeader("Access-Control-Allow-Origin", "*");
        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
//        response.addHeader("Access-Control-Allow-Credentials", "true");
//        response.addHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, DELETE, OPTIONS, PATCH");
//        response.addHeader("Access-Control-Max-Age", "3600");
//        response.addHeader("Vary", "Origin");
        response.addHeader("Access-Control-Allow-Headers", "token,accesstoken,Content-type");
        //请求接口URL时登录token有效性校验
        Object token = request.getHeader("token");
        if(token==null||token.equals("")) {
            token = null;
        }
        boolean flag = false;//请求路径是否在过滤范围标识
        if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
            ctx.setSendZuulResponse(false);
            return null;
        }
        String ignores = filterConfig.getIgnores();
        if(!StringUtilHelper.isEmpty(ignores)) {
            String[] ignores_arr = ignores.split(",");
            for(String ignore:ignores_arr) {
                if(request.getRequestURI().toString().contains(ignore)) {
                    //无需token校验
                    flag = true;
                    break;
                }
            }
        }
        logger.info("网关日志:method={}, uri={},result={},token={}",request.getMethod(), request.getRequestURI(), (true==flag?"无需token校验":"需要token校验"),token);
        if(!flag) {
            //需要校验token有效性
            if(token==null) {
                ctx.setSendZuulResponse(false);
                ctx.setResponseStatusCode(HttpServletResponse.SC_UNAUTHORIZED);
                ctx.setResponseBody("token为空,未认证用户");
                return null;
            } else {
                //redis校验
                if(redisService.check(token.toString())!=ServiceConstants.STATE_1) {
                    ctx.setSendZuulResponse(false);
                    ctx.setResponseStatusCode(HttpServletResponse.SC_UNAUTHORIZED);
                    ctx.setResponseBody("token超时,请重新登录");
                    return null;
                }
            }
        }
        return null;
    }

8个回答

在 你的AuthFilter 里面把shouldFilter() 替换成这个

@Override
    public boolean shouldFilter() {
        RequestContext ctx = RequestContext.getCurrentContext();
        HttpServletRequest request = ctx.getRequest();
                HttpServletResponse response = ctx.getResponse();
        if("OPTIONS".equals(request.getMethod())){
            //过滤该请求,不往下级服务去转发请求,到此结束  
            ctx.setSendZuulResponse(false); 
            ctx.setResponseStatusCode(200);  
            ctx.getResponse().setContentType("text/html;charset=UTF-8");
            ctx.setResponseBody("true");
                            response.setHeader("Access-Control-Allow-Origin", "*");
                            response.setHeader("Access-Control-Allow-Credentials", "true");
                            response.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, DELETE, OPTIONS, PATCH");
                            response.setHeader("Access-Control-Max-Age", "3600");
                            response.addHeader("Access-Control-Allow-Headers", "token,accesstoken,Content-type");
            return false;
        }
        return true;
    }

是不是web.xml没有设置跨域访问的配置?例如

 <!--跨域访问配置-->
    <filter>
       <filter-name>CORS</filter-name>
       <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
       <init-param>
        <param-name>cors.allowOrigin</param-name>
           <param-value>*</param-value>
       </init-param>
       <init-param>
        <param-name>cors.supportedMethods</param-name>
           <param-value>GET, POST, HEAD, PUT, DELETE</param-value>
       </init-param>
       <init-param>
        <param-name>cors.supportedHeaders</param-name>
           <param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value>
       </init-param>
       <init-param>
           <param-name>cors.exposedHeaders</param-name>
           <param-value>Set-Cookie</param-value>
       </init-param>
       <init-param>
           <param-name>cors.supportsCredentials</param-name>
           <param-value>true</param-value>
       </init-param>
   </filter>

   <filter-mapping>
       <filter-name>CORS</filter-name>
       <url-pattern>*.do</url-pattern>
   </filter-mapping>

跨域请求ajax的 把dataType的json换成jsonp。

xuziwen127
xuziwen127 但是我们已经快开发结束了,dataType都是json格式,前端们如果先进行了登陆拿到token放在header里然后就没有跨域问题,但是我把验证token的代码去掉,他们就无法跨域了,验证token的代码我看也没有什么特殊的,我来把验证token的代码贴出来给你们看看
9 个月之前 回复

请求的Origin属性设置有影响吗

解决跨域问题添加配置文件

/**

  • @Description: 解决跨域问题
    /
    @Configuration
    public class CorsConfig {
    private CorsConfiguration buildConfig() {
    CorsConfiguration corsConfiguration = new CorsConfiguration();
    corsConfiguration.addAllowedOrigin("
    ");
    corsConfiguration.addAllowedHeader("*");
    corsConfiguration.addAllowedMethod("*");
    return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter() {
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", buildConfig());
    return new CorsFilter(source);
    }

weixin_43072335
weixin_43072335 回复xuziwen127: 我这边就是这样解决的,你那边前台要更改dataType
9 个月之前 回复
xuziwen127
xuziwen127 这个方法我试过了,百度上大多数方法我都试过了,但是都没有解决问题
9 个月之前 回复
@Configuration
public class MvcConfig extends WebMvcConfigurationSupport {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        //设置允许跨域的路径
        registry.addMapping("/**")
                //设置允许跨域请求的域名
                .allowedOrigins("*")
                //是否允许证书 不再默认开启
                .allowCredentials(true)
                //设置允许的方法
                .allowedMethods("*")
                //跨域允许时间
                .maxAge(3600);
    }

    @Override
    protected void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("swagger-ui.html")
                .addResourceLocations("classpath:/META-INF/resources/");
        registry.addResourceHandler("/webjars/**")
                .addResourceLocations("classpath:/META-INF/resources/webjars/");
    }
}

试试这个吧。我们都是用这个就行了。

大家说的方法都是对的,我当时是请求头里没有带Access-Control-Allow-Headers里设置好的属性所以产生了无法跨域的情况,我随便算一个采纳了

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
spring-boot-starter-web-2.1.7.RELEASE.jar的依赖问题
-
为什么我的spring-boot-maven-plugin回报未知版本
-
springboot2.x引入spring-boot-starter-data-redis依赖,启动报错
-
dubbo spring boot spring-data-jpa报错
-
Spring boot项目引入hive-jdbc依赖后报空指针异常?
-
spring boot中找不到jsp
-
spring boot 。Illegal access:。。。 Could not load [mapper/].
-
spring-boot-maven-plugin插件,打包的时候如何排除指定文件夹?
-
maven同时导入spring-boot-devtools和spring-boot-starter-data-jpa无法启动
-
spring boot 运行出错了 Application failed to start with classpath?
-
springboot2框架搭建的前后端分离系统,session很快就丢失了
-
springboot2.1 引入spring-boot-starter-web时启动 报错
-
在IDEA导入Gradle项目之后一直报错
-
spring cloud 集群模式下,access-token-uri和user-info-uri应该怎么填?
-
关于 spring boot 用gradle打包 war后运行的问题
-
spring boot 集成activiti如何能在启动时不配置数据库参数
-
windows Server环境中,Spring boot服务假死
-
springcloud项目引入spring-cloud-starter-bus-amqp依赖后启动报错Failed to bind properties under 'server.error.include-stacktrace'
-
idea配置spring-boot,引入的test路径找不到
-
程序员实用工具网站
目录 1、搜索引擎 2、PPT 3、图片操作 4、文件共享 5、应届生招聘 6、程序员面试题库 7、办公、开发软件 8、高清图片、视频素材网站 9、项目开源 10、在线工具宝典大全 程序员开发需要具备良好的信息检索能力,为了备忘(收藏夹真是满了),将开发过程中常用的网站进行整理。 1、搜索引擎 1.1、秘迹搜索 一款无敌有良心、无敌安全的搜索引擎,不会收集私人信息,保...
我花了一夜用数据结构给女朋友写个H5走迷宫游戏
起因 又到深夜了,我按照以往在csdn和公众号写着数据结构!这占用了我大量的时间!我的超越妹妹严重缺乏陪伴而 怨气满满! 而女朋友时常埋怨,认为数据结构这么抽象难懂的东西没啥作用,常会问道:天天写这玩意,有啥作用。而我答道:能干事情多了,比如写个迷宫小游戏啥的! 当我码完字准备睡觉时:写不好别睡觉! 分析 如果用数据结构与算法造出东西来呢? ...
别再翻了,面试二叉树看这 11 个就够了~
写在前边 数据结构与算法: 不知道你有没有这种困惑,虽然刷了很多算法题,当我去面试的时候,面试官让你手写一个算法,可能你对此算法很熟悉,知道实现思路,但是总是不知道该在什么地方写,而且很多边界条件想不全面,一紧张,代码写的乱七八糟。如果遇到没有做过的算法题,思路也不知道从何寻找。面试吃了亏之后,我就慢慢的做出总结,开始分类的把数据结构所有的题型和解题思路每周刷题做出的系统性总结写在了 Github...
让程序员崩溃的瞬间(非程序员勿入)
今天给大家带来点快乐,程序员才能看懂。 来源:https://zhuanlan.zhihu.com/p/47066521 1. 公司实习生找 Bug 2.在调试时,将断点设置在错误的位置 3.当我有一个很棒的调试想法时 4.偶然间看到自己多年前写的代码 5.当我第一次启动我的单元测试时 ...
接私活必备的 10 个开源项目!
点击蓝色“GitHubDaily”关注我加个“星标”,每天下午 18:35,带你逛 GitHub!作者 | SevDot来源 | http://1t.click/VE8W...
GitHub开源的10个超棒后台管理面板
目录 1、AdminLTE 2、vue-Element-Admin 3、tabler 4、Gentelella 5、ng2-admin 6、ant-design-pro 7、blur-admin 8、iview-admin 9、material-dashboard 10、layui 项目开发中后台管理平台必不可少,但是从零搭建一套多样化后台管理并不容易,目前有许多开源、免费、...
Git 天天用 但是 Git 原理你了解吗?
Git 原理 做技术一定要知其然知其所以然,意思就是:知道它是这样的,更知道它为什么是这样的。我主要通过4块内容来简单介绍 Git 是原理是什么样的。这4块内容如下: Git 存储目录结构介绍 Git 是如何存储的 Git 的对象 Git引用 当然 Git 原理不仅仅包含这些,想要更深入了解请查看官方教程 https://git-scm.com/book/zh/v2/。 本文内容是我在 Git...
100 个网络基础知识普及,看完成半个网络高手
欢迎添加华为云小助手微信(微信号:HWCloud002或HWCloud003),输入关键字“加群”,加入华为云线上技术讨论群;输入关键字“最新活动”,获取华为云最新特惠促销。华为云诸多技术大咖、特惠活动等你来撩! 1)什么是链接? 链接是指两个设备之间的连接。它包括用于一个设备能够与另一个设备通信的电缆类型和协议。 2)OSI 参考模型的层次是什么? 有 7 个 OSI 层:物理...
漫画:什么是摩尔斯电码?
摩尔斯电码是什么摩尔斯电码(Morse code),是1837年由美国人发明,本质上是一种对信息的编码,最初用于人们的远程通信。那个时候,人们连电话都还没发明出来,更不用...
中国最顶级的一批程序员,从首富到首负!
过去的20年是程序员快意恩仇的江湖时代通过代码,实现梦想和财富有人痴迷于技术,做出一夜成名的产品有人将技术变现,创办企业成功上市这些早一代的程序员们创造的奇迹引发了一浪高...
为什么面向对象糟透了?
又是周末,编程语言“三巨头”Java, Lisp 和C语言在Hello World咖啡馆聚会。服务员送来咖啡的同时还带来了一张今天的报纸, 三人寒暄了几句, C语言翻开了...
分享靠写代码赚钱的一些门路
作者 mezod,译者 josephchang10如今,通过自己的代码去赚钱变得越来越简单,不过对很多人来说依然还是很难,因为他们不知道有哪些门路。今天给大家分享一个精彩...
对计算机专业来说学历真的重要吗?
我本科学校是渣渣二本,研究生学校是985,现在毕业五年,校招笔试、面试,社招面试参加了两年了,就我个人的经历来说下这个问题。 这篇文章很长,但绝对是精华,相信我,读完以后,你会知道学历不好的解决方案,记得帮我点赞哦。 先说结论,无论赞不赞同,它本质就是这样:对于技术类工作而言,学历五年以内非常重要,但有办法弥补。五年以后,不重要。 目录: 张雪峰讲述的事实 我看到的事实 为什么会这样 ...
在线就能用的Linux我给你找好了
来源:公众号【编程珠玑】 作者:守望先生 网站:https://www.yanbinghu.com 前言 是不是不想装虚拟机,还想体验一下Linux?是不是自己的电脑不在,又想搞事情?今天给大家推荐几个在线就可以玩的Linux环境以及学习Shell的地方。 在线Linux环境 如果你不想安装虚拟机,这里提供几个在线就能把玩Linux的网站,他们不需要注册用户,可以直接使用。 Unix...
世界上最好的学习法:费曼学习法
你是否曾幻想读一遍书就记住所有的内容?是否想学习完一项技能就马上达到巅峰水平?除非你是天才,不然这是不可能的。对于大多数的普通人来说,可以通过笨办法(死记硬背)来达到学习的目的,但效率低下。当然,也可以通过优秀的学习法来进行学习,比如今天讲的“费曼学习法”,可以将你的学习效率极大的提高。 费曼学习法是由加拿大物理学家费曼所发明的一种高效的学习方法,费曼本身是一个天才,13岁自学微积分,24岁加入曼...
学Linux到底学什么
来源:公众号【编程珠玑】 作者:守望先生 网站:https://www.yanbinghu.com/2019/09/25/14472.html 前言 ​我们常常听到很多人说要学学Linux或者被人告知说应该学学Linux,那么学Linux到底要学什么? 为什么要学Linux 在回答学什么之前,我们先看看为什么要学。首先我们需要认识到的是,很多服务器使用的是Linux系统,而作为服务器应...
深入理解C语言指针
一、指针的概念 要知道指针的概念,要先了解变量在内存中如何存储的。在存储时,内存被分为一块一块的。每一块都有一个特有的编号。而这个编号可以暂时理解为指针,就像酒店的门牌号一样。 1.1、变量和地址 先写一段简单的代码: void main(){ int x = 10, int y = 20; } 这段代码非常简单,就是两个变量的声明,分别赋值了 10、20。我们把内存当做一个酒店,而每个房间就...
C语言实现推箱子游戏
很早就想过做点小游戏了,但是一直没有机会动手。今天闲来无事,动起手来。过程还是蛮顺利的,代码也不是非常难。今天给大家分享一下~ 一、介绍 开发语言:C语言 开发工具:Dev-C++ 5.11 日期:2019年9月28日 作者:ZackSock 也不说太多多余的话了,先看一下效果图: 游戏中的人物、箱子、墙壁、球都是字符构成的。通过wasd键移动,规则的话就是推箱子的规则,也就不多说了。 二、代...
面试官:兄弟,说说基本类型和包装类型的区别吧
Java 的每个基本类型都对应了一个包装类型,比如说 int 的包装类型为 Integer,double 的包装类型为 Double。基本类型和包装类型的区别主要有以下 4 点。
焦虑的互联网人及35岁定律
一、35岁定律 好像现在整个互联网行业都在贩卖焦虑,从之前的30岁淘汰,到现在的35岁,到最新的39.9岁,你会发现,年龄趋势怎么在上升啊,对了兄弟,就是那一批人嘛,他们每年涨一岁,可不就是焦虑年龄越来越大了。 最早我看到的新闻是说,第一批互联网人都赶上了好时候,现在差不多五十岁左右,要么创业成功,要么在大公司做股东,反正都是实现了经济自由的一波人,包括马老师,都是那一拨。 那剩下的呢?有人...
8000字干货:那些很厉害的人是怎么构建知识体系的
本文约8000字,正常阅读需要15~20分钟。读完本文可以获得如下收益: 分辨知识和知识体系的差别 理解如何用八大问发现知识的连接点; 掌握致用类知识体系的构建方法; 能够应用甜蜜区模型找到特定领域来构建知识体系。 1. 知识体系?有必要吗? 小张准备通过跑步锻炼身体,可因为之前听说过小腿变粗、膝盖受伤、猝死等等与跑步有关的意外状况,有点担心自己会掉进各种坑里,就在微信上问朋友圈一直晒跑步...
相关热词 c# oracle 开发 c#选择字体大小的控件 c# usb 批量传输 c#10进制转8进制 c#转base64 c# 科学计算 c#下拉列表获取串口 c# 如何防止参数被修改 c#开发微信公众号例子 c# null