Vue+axios+spring boot遇到的问题(跨域请求)

一、点击一次按钮 会发送两次请求的问题

第一个请求 Method是OPTIONS

第二个请求 Method是POST

后台过滤器也是检测出访问了两次,但是是偶尔才会重复访问。

这是因为 跨域请求导致 每次请求前都会先发送一个空的请求检查服务器,

可以在后台过滤器加个这个:

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response1 = (HttpServletResponse) response;
        HttpServletRequest request1 = (HttpServletRequest) request;
        response1.setHeader("Access-Control-Allow-Origin", "*");
        response1.setHeader("Access-Control-Allow-Credentials", "true");
        response1.setHeader("Access-Control-Allow-Methods", "*");
        response1.setHeader("Access-Control-Allow-Headers", "Content-Type,Access-Token");
        response1.setHeader("Access-Control-Expose-Headers", "*");

        if (request1.getMethod().equals( RequestMethod.OPTIONS.toString())){
            System.out.println("-----检查------");
            return;
        }
        chain.doFilter(request, response);
    }

二、跨域请求问题

添加过滤器,过滤器里面添加上面的代码可以解决跨域请求问题

三、axios访问接口 后台读取的数据都是空的问题 如下

前台:

<script>
  export default {
    data() {
      return {
        formItem: {
          menu_name: ‘‘,
          menu_info: ‘无‘,
          menu_level: ‘‘,
          menu_state: true,
          app_version: [],
          operate_user: ‘admin‘,
          menu_superior:‘-‘
        },
        app_versions: [
          {
            value: ‘100‘,
            label: ‘1.0.0‘
          },
          {
            value: ‘101‘,
            label: ‘1.0.1‘
          },
          {
            value: ‘102‘,
            label: ‘1.0.2‘
          },
          {
            value: ‘110‘,
            label: ‘1.1.0‘
          }
        ]
      }
    },
    methods: {
      addMenu: function (form) {
        console.log(JSON.stringify(form))

        this.$http.post(‘http://localhost:8888/api/manager/addMenu‘, {

          data:JSON.stringify(form)
        })
          .then(function (res) {
            if (res.data.no == ‘1‘) {
              alert(‘ok‘)
            }
          })
          .catch(function (err) {
            console.log(‘----失败-----‘);
          });

      }

    }

  }
</script>

后台日志

可以看到 前台明明传过去了,后台也能接收到,但是为什么全是null呢,搞了半天这里出问题了:

  addMenu: function (form) {
        console.log(JSON.stringify(form))

        this.$http.post(‘http://localhost:8888/api/manager/addMenu‘, (form))
          .then(function (res) {
            if (res.data.no == ‘1‘) {
              alert(‘ok‘)
            }
          })
          .catch(function (err) {
            console.log(‘----失败-----‘);
          });

      }

其实这里不用转json,直接传对象就可以,然后看下后台:

这样就对了。

时间: 2024-11-05 09:07:10

Vue+axios+spring boot遇到的问题(跨域请求)的相关文章

Spring Boot全局支持CORS(跨源请求)

1 import org.springframework.context.annotation.Configuration; 2 import org.springframework.web.servlet.config.annotation.CorsRegistry; 3 import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter; 4 5 /** 6 * @Author:CoderZZ 7

ASP.NET WebApi+Vue前后端分离之允许启用跨域请求

前言: 这段时间接手了一个新需求,将一个ASP.NET MVC项目改成前后端分离项目.前端使用Vue,后端则是使用ASP.NET WebApi.在搭建完成前后端框架后,进行接口测试时发现了一个前后端分离普遍存在的问题跨域(CORS)请求问题.因此就有了这篇文章如何启用ASP.NET WebApi 中的 CORS 支持. 一.解决Vue报错:OPTIONS 405 Method Not Allowed问题: 错误重现: index.umd.min.js:1 OPTIONS http://local

Spring Boot+AngularJS中因为跨域导致Session丢失

http://blog.csdn.net/dalangzhonghangxing/article/details/52446821 如果还在为跨域问题烦恼,请查看博主的 解决angular+spring boot的跨域问题 那篇文章. 博主在项目开发过程中,遇到了由于跨域而导致的Session丢失问题,非常的恶心,但是经过在网上查阅各种资料,发现解决方法十分简单. 在我们每一次的数据请求中,浏览器都会向后台发送一个JSession,后台会根据这个值自动查找Id为JSession的那个sessio

Spring Boot + Vue 跨域请求问题

使用Spring Boot + Vue 做前后端分离项目搭建,实现登录时,出现跨域请求 Access to XMLHttpRequest at 'http://localhost/open/login' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. V

vue.js学习之 跨域请求代理与axios传参

vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{},改为这样: proxyTable: { '/api': { target: 'http://121.41.130.58:9090',//设置你调用的接口域名和端口号 别忘了加http changeOrigin: true, pathRewrite: { '^/api': ''//这里理解成用'/ap

在vue中使用axios实现跨域请求并且设置返回的数据的格式是json格式,不是jsonp格式

在vue中使用axios实现跨域请求 需求分析:在项目中需要抓取qq音乐的歌曲列表的数据,由于要请求数据的地址url=https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg.从qq音乐的官网上可以看到该请求的请求头中的referer中的域名是y.qq.com(发送请求页面的域名),而host的域名是c.y.qq.com(被请求页面的域名),由于两者不一样,所以不能通过前端直接发送请求给qq服务器去拿数据.这时候需要服务器做一个代理

解决vue axios跨域请求发送两次问题

问题: vue axios跨域请求,在Request Headers加Authorization传递Token时,发现统一请求触发了两次,第一次是Request Method: OPTIONS请求. 原因: 跨域请求时,浏览器会首先使用OPTIONS方法发起一个预请求,判断接口是否能够正常通讯.如果通讯异常,则不会发送真正的请求,如果测试通讯正常,则开始真正的请求. 解决方法: 后台:判断请求方式是OPTIONS,则不处理: 预请求 发送真正请求  PHP解决方法 class Common ex

spring boot跨域请求访问配置以及spring security中配置失效的原理解析

一.同源策略 同源策略[same origin policy]是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源. 同源策略是浏览器安全的基石. 什么是源 源[origin]就是协议.域名和端口号.例如:http://www.baidu.com:80这个URL. 什么是同源 若地址里面的协议.域名和端口号均相同则属于同源. 是否是同源的判断 例如判断下面的URL是否与 http://www.a.com/test/index.html 同源 http://www.a

解决vue+springboot前后端分离项目,前端跨域访问sessionID不一致导致的session为null问题

问题: 前端跨域访问后端接口, 在浏览器的安全策略下默认是不携带cookie的, 所以每次请求都开启了一次新的会话. 在后台打印sessionID我们会发现, 每次请求的sessionID都是不同的, 既然每次请求都是一个新的会话, 那我们去获取session的时候自然就是null了. 解决办法如下: 环境: vue 2.0 springboot 2.1.6 一.前端部分 1.  在vue引入axios的位置添加以下代码 import axios from 'axios' axios.defau