Vue+axios发送POST请求问题

[Blessedwmm]

通过POSTMAN进行测试，后台REST API接口没有问题（SpringBoot+Spring REST Data+Spring MVC），有如下接口：
GET http://localhost:8080/dept 获取所有部门信息
GET http://localhost:8080/dept/{id} 获取id对应的部门信息
POST http://localhost:8080/dept 添加部门 JSON数据：{"departmentName": "name"}


现在Vue项目中 proxyTable进行代理为'/api'，即原先的http://localhost:8080/dept 变成 /api/dept，跨域changeOrigin: true
有两个按钮，如下：

<template>
  <div>
    <button @click="queryAllEmployees">查询所有员工</button>
    <button @click="addDept">添加部门</button>
  </div>
</template>

另外两个监听函数为：

// import qs from 'qs'
export default {
  name: 'HelloWorld',
  methods: {
    queryAllEmployees () {
      var url = '/api/emp'
      this.$axios.get(url).then(
        res => {
          console.log(res)
        }
      ).catch(
        err => {
          console.log(err)
        }
      )
    },
    addDept () {
      this.$axios({
        url: '/api/dept',
        method: 'post',
        data: {departmentName: '外联部门'}
      }).then(
        res => {
          console.log(res)
        }
      ).catch(
        err => {
          console.log(err)
        }
      )
    }
  }
}

第一个是完全没有问题的，而第二个在chrome中有问题：


下面是在Ajax中的测试，也完全整却，添加成功，有一个小疑问，data为什么不加引号就是发不了，有语法错误，而且后面也需要时一个字符串？

$.ajax({
				url: 'http://localhost:8080/dept',
				method: 'POST',
				contentType: 'application/json',
				dataType: 'json',
				"data": '{"departmentName": "外联部门"}',
				success: function(data){
					alert('成功')
				}
			});

希望大家帮忙解决，多谢了，本人在校大学生，快要毕业

[喵C神]

[color=#993300]

[align=right]

引用

[/align][/color]