问一个关于 axios + springmvc 跨域的问题

本贴最后更新于 1853 天前,其中的信息可能已经时移世改

场景

前后端分离,由于页面是不部署到容器中的,所以采用在 springmvc 后台运行跨域来实现。

问题

一般的请求没有什么问题。
但是由于需要解决中文参数乱码的问题,需要加 请求头,在 axios 添加了请求头以后,会有一个 options 请求先被发出,而这个 options 请求就会出现跨域无法请求的问题,Springmvc 中 是允许 options 请求的,但是不生效

response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");

求大佬告知解决方法,我从网上搜到的都说是 对 options 请求 直接不处理,直接返回,但是我试了好像没有什么卵用。

相关帖子

被采纳的回答
    • 我后端用 Springboot,前端 Vue-cli,请求用的也是 axios,没有做任何配置,就只在 Controller 上加了一个 @CrossOrigin 注解,可以正常请求
    • 后端不使用 @CrossOrigin 注解,不允许跨域,前端可以配置 WebpackdevServer 下的 proxy 选项详见:https://webpack.js.org/configuration/dev-server/#devserverproxy
      这种方式生产环境部署还是需要解决跨域问题,可以考虑用 Nginx 或者 Apache 配置代理让后端接口跟前端同域

    希望我的经验可以帮到你

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • 88250

    再加一个头 Access-Control-Allow-Origin 值设置为 request.getHeader("Origin")

    2 回复
  • someone9891

    这个我设置了 “*”

  • someone9891

    刚才又尝试了一下,在 拦截器里面 单独处理了,现在可以 传 请求头,但是不知道这样会不会引起其他对问题

    if ("OPTIONS".equals(request.getMethod())){
    			 response.setContentType("text/html;charset=UTF-8");
    			 response.addHeader("Access-Control-Allow-Origin", "*");
    			 response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
    			 response.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type");
    			 response.addHeader("Access-Control-Max-Age", "1800");
    			 BerWebUtil.responseSuccess(response, null);
    		 }
    
    1 回复
  • 88250

    这是响应头吧 😂

    2 回复
  • someone9891

    不是,我是页面 传如 request headers 的时候传不过来。不传就正常。加了 request headers 就会有一个 OPTIONS 请求,这个 OPTIONS 请求会跨域。

  • someone9891

    开始我在 controller 中写了 运行 跨域,但是那个 OPTIONS 请求根本 就到不了 controller ,我用拦截器 试了是可以拦截到 OPTIONS 请求,我就在这里处理了,这样不会存在其他影响吧

  • 88250

    OPTIONS 跨域....这样听着好奇怪,OPTIONS 请求(预检请求)本身是没有跨域问题的。控制器里收不到估计是路由配置问题。你看下社区标签 CORS 下的其他帖子,可能会有帮助。

    2 回复
  • someone9891

    控制器收不到,然后 前端页面会报出来是跨域……

  • someone9891

    我看看 CORS 下的内容吧,具体这玩意以前我也没了解多少,都是遇到问题了查一查 才知道原来会有两个请求的。。

  • Blackman99

    @CrossOrigin 注解试过吗

    1 回复
  • someone9891

    试了,不好使

    1 回复
  • Blackman99

    前端请求代码可以贴一下吗

    1 回复
  • someone9891

    在外面,一会回去给你看看

  • Lee981265

    可以使用浏览器跨域模式

  • 这个问题我遇到过,后来发现 spring 的配置是没有问题的,然后是配置了 vue 的 devserver 解决的,打包后也可以用。

    1 回复
  • telami

    vue 的 dev-server,就是 dev 时才能用的,build 之后没法用的,上线之后还是要解决跨域问题。

  • Blackman99
    • 我后端用 Springboot,前端 Vue-cli,请求用的也是 axios,没有做任何配置,就只在 Controller 上加了一个 @CrossOrigin 注解,可以正常请求
    • 后端不使用 @CrossOrigin 注解,不允许跨域,前端可以配置 WebpackdevServer 下的 proxy 选项详见:https://webpack.js.org/configuration/dev-server/#devserverproxy
      这种方式生产环境部署还是需要解决跨域问题,可以考虑用 Nginx 或者 Apache 配置代理让后端接口跟前端同域

    希望我的经验可以帮到你

    1 回复
  • someone9891

    其实没有答案符合我的情况,不过我自己已经解决了,看你这么辛苦,就采纳你的吧

    1 回复
  • telami

    仔细看我回复的那篇 Blog 了么,解决方式就那几种

请输入回帖内容 ...

推荐标签 标签

  • 反馈

    Communication channel for makers and users.

    123 引用 • 908 回帖 • 221 关注
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3169 引用 • 8208 回帖
  • Dubbo

    Dubbo 是一个分布式服务框架,致力于提供高性能和透明化的 RPC 远程服务调用方案,是 [阿里巴巴] SOA 服务化治理方案的核心框架,每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 605 关注
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    35 引用 • 200 回帖 • 25 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 417 关注
  • BAE

    百度应用引擎(Baidu App Engine)提供了 PHP、Java、Python 的执行环境,以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用,并且提供动态扩容和负载均衡的运行环境,让开发者不用考虑高成本的运维工作,只需专注于业务逻辑,大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 620 关注
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    334 引用 • 622 回帖
  • OpenStack

    OpenStack 是一个云操作系统,通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成,同样也可以通过 Web 接口让最终用户部署资源。

    10 引用 • 5 关注
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库,并提供多种语言的 API。从 2010 年 3 月 15 日起,Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始,Redis 的开发由 Pivotal 赞助。

    285 引用 • 248 回帖 • 105 关注
  • 书籍

    宋真宗赵恒曾经说过:“书中自有黄金屋,书中自有颜如玉。”

    76 引用 • 390 回帖 • 1 关注
  • Angular

    AngularAngularJS 的新版本。

    26 引用 • 66 回帖 • 524 关注
  • 导航

    各种网址链接、内容导航。

    37 引用 • 168 回帖
  • 面试

    面试造航母,上班拧螺丝。多面试,少加班。

    324 引用 • 1395 回帖
  • 机器学习

    机器学习(Machine Learning)是一门多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能。

    82 引用 • 37 回帖
  • 博客

    记录并分享人生的经历。

    272 引用 • 2386 回帖
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 669 关注
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    405 引用 • 3557 回帖
  • PHP

    PHP(Hypertext Preprocessor)是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点,主要适用于 Web 开发领域,据说是世界上最好的编程语言。

    175 引用 • 407 回帖 • 497 关注
  • 链滴

    链滴是一个记录生活的地方。

    记录生活,连接点滴

    148 引用 • 3769 回帖
  • Ubuntu

    Ubuntu(友帮拓、优般图、乌班图)是一个以桌面应用为主的 Linux 操作系统,其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词,意思是“人性”、“我的存在是因为大家的存在”,是非洲传统的一种价值观,类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    123 引用 • 168 回帖
  • Unity

    Unity 是由 Unity Technologies 开发的一个让开发者可以轻松创建诸如 2D、3D 多平台的综合型游戏开发工具,是一个全面整合的专业游戏引擎。

    25 引用 • 7 回帖 • 212 关注
  • PWL

    组织简介

    用爱发电 (Programming With Love) 是一个以开源精神为核心的民间开源爱好者技术组织,“用爱发电”象征开源与贡献精神,加入组织,代表你将遵守组织的“个人开源爱好者”的各项条款。申请加入:用爱发电组织邀请帖
    用爱发电组织官网:https://programmingwithlove.stackoverflow.wiki/

    用爱发电组织的核心驱动力:

    • 遵守开源守则,体现开源&贡献精神:以分享为目的,拒绝非法牟利。
    • 自我保护:使用适当的 License 保护自己的原创作品。
    • 尊重他人:不以各种理由、各种漏洞进行未经允许的抄袭、散播、洩露;以礼相待,尊重所有对社区做出贡献的开发者;通过他人的分享习得知识,要留下足迹,表示感谢。
    • 热爱编程、热爱学习:加入组织,热爱编程是首当其要的。我们欢迎热爱讨论、分享、提问的朋友,也同样欢迎默默成就的朋友。
    • 倾听:正确并恳切对待、处理问题与建议,及时修复开源项目的 Bug ,及时与反馈者沟通。不抬杠、不无视、不辱骂。
    • 平视:不诋毁、轻视、嘲讽其他开发者,主动提出建议、施以帮助,以和谐为本。只要他人肯努力,你也可能会被昔日小看的人所超越,所以请保持谦虚。
    • 乐观且活跃:你的努力决定了你的高度。不要放弃,多年后回头俯瞰,才会发现自己已经成就往日所仰望的水平。积极地将项目开源,帮助他人学习、改进,自己也会获得相应的提升、成就与成就感。
    1 引用 • 487 回帖
  • jsoup

    jsoup 是一款 Java 的 HTML 解析器,可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API,可通过 DOM,CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 468 关注
  • 生活

    生活是指人类生存过程中的各项活动的总和,范畴较广,一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    230 引用 • 1454 回帖
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统,主要使用于便携设备。2005 年由 Google 收购注资,并拉拢多家制造商组成开放手机联盟开发改良,逐渐扩展到到平板电脑及其他领域上。

    334 引用 • 323 回帖 • 12 关注
  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    103 引用 • 294 回帖
  • Solo

    Solo 是一款小而美的开源博客系统,专为程序员设计。Solo 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    1429 引用 • 10050 回帖 • 486 关注