vue前端发送请求后端没收到

在写网页的时候，前端用的vue，后端用的springmvc接收前端传来的请求

在本地写的前端的端口用的是8080，后端用的端口是8081，但是后端总是接收不到

用代码块功能插入代码，请勿粘贴截图。 不用代码块回答率下降 50%

package com.springmvc;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import javax.servlet.http.HttpServletRequest;
import java.awt.*;
import java.util.Map;

@RestController
@RequestMapping("/firstcontroller")
public class FirstController {
    @PostMapping("/login")
    public void hello(@RequestBody Map<String, Object> requestBody){
//        String username=request.getParameter("username");
//        System.out.println("username"+username);
//        System.out.println("hello wrold");
//        System.out.println(username);
//        System.out.println(password);
        String username = (String) requestBody.get("username");
        String password = (String) requestBody.get("password");
        System.out.println(username);
        System.out.println(password);

    }
}

<script>

import axios from 'axios'

export default{
  name:'UserLogin',
  data(){
    return{
      username:'',
      password:'',
      usernameText:'支持学号',
      passwordText:'请输入密码'
    }
  },
  methods:{
    //'确定'按键的点击事件
    handleLogin(){
      alert("点击事件")

      axios.post('http://localhost:8081/firstcontroller/login',{
        username:this.username,
        password:this.password
      })
          .then(function (response){
            console.log(response);
          })
          .catch(function(error){
            console.log(error);
          })

      // if (this.username === 'admin' && this.password === '123456') {
      //   // 登录成功，保存登录状态
      //   localStorage.setItem('isLogin', 'true')
      //   // 跳转到管理页面
      //   this.$router.push('/boos')
      // } else {
      //   alert('用户名或密码错误，请重新输入！')
      // }
    }
  },
  computed:{
    placeholderText(){
      return this.username ? '':this.usernameText
    },
    placeholderText2(){
      return this.password ? '':this.passwordText
    }
  }
}
</script>

运行时在http://localhost:8080/login输入账号和密码后，后端无法收到数据。

尝试在后端添加跨域处理，在 SpringMVC 的配置文件中添加 CorsFilter 过滤器

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xmlns:cors="http://www.springframework.org/schema/c"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd
       http://www.springframework.org/schema/context
       https://www.springframework.org/schema/context/spring-context.xsd
       http://www.springframework.org/schema/mvc
       https://www.springframework.org/schema/mvc/spring-mvc.xsd">
    <!--  自动扫描，由 IOC 统一管理  -->
    <context:component-scan base-package="com"/>
    <!--Spring MVC 不处理静态资源-->
    <mvc:default-servlet-handler/>
    <!--  支持 MVC 注解驱动  -->
    <mvc:annotation-driven/>
    <!-- 配置跨域支持 -->
    <cors:cors-config>
        <cors:mapping path="/**" allowed-origins="*" allowed-methods="GET,POST,PUT,DELETE" allowed-headers="*" allow-credentials="true" max-age="3600"></cors:mapping>
    </cors:cors-config>

</beans>

以下是几个文件代码的具体实现

<!--web.xml-->
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <servlet>
        <servlet-name>studentServlet</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>

        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:mapper/spring-mvc.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>studentServlet</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
</web-app>

目录

###tomcat配置

浏览器的调试功能，看下网络那里接口的请求情况