已解决：axios 发送post请求，报403错误

一、问题描述

通过axios向后端发送get请求可以正常访问，发送POST请求（不带参数）报403错误。

希望大家帮帮忙，非常感谢！

问题截图

二、代码

1、前端

login.vue代码：

import axios from "axios";

export default {
	  name: "login",
	  methods: {
	    submitForm(formName) {
	      this.$refs[formName].validate((valid) => {
	        if (valid) {
	          axios({
	            method: "post",
				url:"/api/login/loginCheck",
				})
				.then((msg) => console.log(msg))
				.catch((err)=>console.log(err));
	        } else {
	          console.log('error submit!!');
	          return false;
	        }
	      });
	    },
	  },
	};

vue.config.js代码：

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  devServer:{
	proxy:{
	  '/api/*':{
	    // 跨域的服务器地址
	    target: 'http://localhost:8081/',
	    // 是否允许跨域
	    changeOrigin: true,
	   },
	}
  }
});

2、后端

controller:

@RestController
@RequestMapping("/api/login")
public class LoginController {

    @RequestMapping("/loginCheck")
    public String loginCheck(){
        return "测试";
    }

}

代理相关的配置

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
        .allowedOriginPatterns("*")
        .allowedMethods("get","post")
        .allowCredentials(true)
        .maxAge(3600);
    }
}

三、解决方法

问题产生的原因：

未允许携带头信息

将后端代理相关的配置修改为：

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
        .allowedMethods("GET","POST")
        //允许携带头信息（该处为所有头信息，可根据自己的需求修改）
        .allowedHeaders("*")
        .allowedOrigins("*")
        .maxAge(3600);
    }
}

参考链接：
头信息配置：https://blog.csdn.net/qq_39136661/article/details/119580081
WebMvcConfigurer接口学习：https://blog.csdn.net/weixin_45433031/article/details/121846207