axios工具类 post传参 后端为null

如果你使用 Axios 工具类向后端发送 POST 请求时，出现了后端返回 null 的情况，可能是因为你的请求参数没有正确地传递到后端。

以下是一些可能导致该问题的原因和解决方法：

1. 检查请求参数名称和值是否正确。确保你在请求体中发送了正确的参数名称和值，以确保后端可以正确地解析它们。你可以使用浏览器的开发者工具或其他调试工具来检查请求体。

2. 检查请求头是否正确设置。某些后端框架可能需要在请求头中设置特定的内容类型或其他参数，以便正确解析请求体。确保你正确地设置了请求头。

3. 检查后端代码是否正确解析请求参数。如果你的后端代码无法正确解析请求体中的参数，那么它可能会返回 null。确保你的后端代码正确地解析请求参数，并将它们用于处理请求。

如果你还无法解决该问题，请提供更多详细信息，例如请求代码、后端代码和错误信息，以便我们更好地理解问题并提供帮助。

相关问题

axios工具类 post传参为null

如果您想要使用axios工具类进行post请求，并且请求参数为null，那么您需要在请求时将请求参数设置为一个空对象{}，而不是直接传入null。

例如：

axios.post('/api/your-url', {})
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.log(error);
  });

这样就可以发送一个post请求，请求参数为一个空对象{}。

SpringBoot+vue做请求头中加token，，从后端到前端，到所有的工具类已经请求拦截器和响应拦截器的配置请给写个详细完整的例子

好的，这里给出一个SpringBoot+Vue前后端分离的项目中实现请求头中加Token的完整示例。

1. 后端配置

首先，在后端的Spring Boot项目中，我们需要进行如下配置：

1.1 创建一个Token的工具类，用于生成、解析、校验Token。

package com.example.demo.util;

import io.jsonwebtoken.Claims;
import io.jsonwebtoken.Jwts;
import io.jsonwebtoken.SignatureAlgorithm;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;

import java.util.Date;
import java.util.HashMap;
import java.util.Map;

@Component
public class TokenUtils {

    /**
     * token有效期（小时）
     */
    @Value("${token.expire.hours}")
    private int expireHours;

    /**
     * token加密密钥
     */
    @Value("${token.secret}")
    private String secret;

    /**
     * 生成Token
     */
    public String generateToken(String username) {
        Map<String, Object> claims = new HashMap<>();
        claims.put("username", username);
        Date now = new Date();
        Date expireTime = new Date(now.getTime() + expireHours * 60 * 60 * 1000);
        return Jwts.builder()
                .setClaims(claims)
                .setIssuedAt(now)
                .setExpiration(expireTime)
                .signWith(SignatureAlgorithm.HS256, secret)
                .compact();
    }

    /**
     * 解析Token
     */
    public Claims parseToken(String token) {
        return Jwts.parser()
                .setSigningKey(secret)
                .parseClaimsJws(token)
                .getBody();
    }

    /**
     * 校验Token是否过期
     */
    public boolean isTokenExpired(Date expirationTime) {
        return expirationTime.before(new Date());
    }
}

1.2 创建一个自定义的拦截器，在请求头中验证Token。

package com.example.demo.interceptor;

import com.example.demo.util.TokenUtils;
import io.jsonwebtoken.Claims;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@Component
public class TokenInterceptor implements HandlerInterceptor {

    @Autowired
    private TokenUtils tokenUtils;

    /**
     * 在请求处理之前进行拦截，验证Token
     */
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        String token = request.getHeader("Authorization");
        if (token == null || token.isEmpty()) {
            response.setStatus(401);
            return false;
        }
        Claims claims = tokenUtils.parseToken(token);
        if (claims == null || tokenUtils.isTokenExpired(claims.getExpiration())) {
            response.setStatus(401);
            return false;
        }
        return true;
    }

    /**
     * 在请求处理之后进行拦截
     */
    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {
        // do nothing
    }

    /**
     * 在请求处理完成之后进行拦截
     */
    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {
        // do nothing
    }
}

1.3 配置拦截器

在Spring Boot的配置文件中，将拦截器加入到拦截器链中。

spring:
  mvc:
    # 配置拦截器
    interceptor:
      # 自定义拦截器
      - class: com.example.demo.interceptor.TokenInterceptor

2. 前端配置

在前端的Vue项目中，我们需要进行如下配置：

2.1 创建一个请求拦截器，在请求头中添加Token。

import axios from 'axios'

const instance = axios.create({
  baseURL: process.env.VUE_APP_API_URL,
  timeout: 10000
})

// 请求拦截器
instance.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token')
    if (token) {
      config.headers.Authorization = token
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

export default instance

2.2 创建一个响应拦截器，在Token失效时跳转到登录页。

import router from '@/router'

// 响应拦截器
instance.interceptors.response.use(
  response => {
    return response
  },
  error => {
    if (error.response && error.response.status === 401) {
      localStorage.removeItem('token')
      router.push('/login')
    }
    return Promise.reject(error)
  }
)

3. 测试

至此，我们已经完成了Token的生成、解析、校验，以及在请求头中添加Token，Token失效时跳转到登录页的配置。下面我们可以进行测试了。

3.1 登录时生成Token

在登录接口中，当用户名和密码正确时，生成Token并返回给前端。

@RestController
@RequestMapping("/api/auth")
public class AuthController {

    @Autowired
    private TokenUtils tokenUtils;

    @PostMapping("/login")
    public ResponseEntity<?> login(@RequestBody AuthRequest request) {
        // 验证用户名和密码
        // ...

        // 生成Token
        String token = tokenUtils.generateToken(request.getUsername());

        // 返回Token
        return ResponseEntity.ok(new AuthResponse(token));
    }
}

3.2 在请求头中添加Token

在每次请求时，将Token存储到localStorage中，在请求拦截器中获取Token并添加到请求头中。

import api from '@/api'

export default {
  login(username, password) {
    return api.post('/auth/login', { username, password })
      .then(res => {
        const token = res.data.token
        localStorage.setItem('token', token)
        return token
      })
  }
}

3.3 Token失效时跳转到登录页

当后端返回401（未授权）时，响应拦截器会将Token从localStorage中删除，并跳转到登录页。

import api from '@/api'

export default {
  getProfile() {
    return api.get('/user/profile')
      .then(res => {
        return res.data
      })
  }
}

以上就是完整的示例，希望可以帮助到你。