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

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

场景

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

问题

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

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

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

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

    希望我的经验可以帮到你

20 回帖
请输入回帖内容...
  • 88250

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

    https://hacpai.com/tag/cors

    2 回复
  • gitors

    这个我设置了 “*”

  • gitors

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

    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 回复
  • gitors

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

  • gitors

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

  • 88250

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

    2 回复
  • gitors

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

  • gitors

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

  • Blackman99

    @CrossOrigin 注解试过吗

    1 回复
  • gitors

    试了,不好使

    1 回复
  • Blackman99

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

    1 回复
  • gitors

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

  • Lee981265

    可以使用浏览器跨域模式

  • lizhongyue248

    这个问题我遇到过,后来发现 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 回复
  • gitors

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

    1 回复
  • telami

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

请输入回帖内容 ...