Django签名模块报错：No ':' found in value，Postman正常Axios异常

我基于Django REST Framework开发API，使用django.core.signing模块生成token。在Postman等API客户端中，签名与验签功能正常，但通过Next.js前端的Axios调用时，出现错误提示No ':' found in value。排查发现，传入的token中冒号被转义为%3A，而实际正确的token包含冒号。

相关代码 #

API代码（Django） #

def create(self, request, *args, **kwargs):
    activation_token = request.data.get("activation_token")
    activation_code = request.data.get("activation_code")
    print(activation_token)
    try:
        data = signer.unsign_object(
            activation_token, max_age=timedelta(minutes=10))
    except Exception as e:
        print(e)
        return Response({"message": "OTP has expired! Try registering again."}, status=status.HTTP_400_BAD_REQUEST)
    if data["activation_code"] == activation_code:
        user = User.objects.create_user(
            email=data["email"], password=data["password"], first_name=data["first_name"], last_name=data["last_name"])
        serializer = UserSerializer(user, many=False)
        return Response(serializer.data, status=status.HTTP_201_CREATED)
    else:
        return Response({"message": "Invalid OTP"}, status=status.HTTP_400_BAD_REQUEST)

原Axios代码（Next.js） #

const response = await axios.post(
    `${BASEURL}auth/users/activate/`,
    JSON.stringify({
      activation_code: values.otp,
      activation_token: token,
    }),
    {
      headers: {
        Accept: "*/*",
        "Content-Type": "application/json",
      },
    }
);

问题原因 #

手动用JSON.stringify()序列化请求体，同时又设置了Content-Type: application/json，会触发Axios对已经是JSON字符串的内容再次进行URL编码，导致token里的冒号被转成%3A。后端收到的不是原始token，自然无法通过signer.unsign_object的验签，抛出No ':' found in value错误。

解决方法 #

直接把请求数据以对象形式传给Axios，不要手动调用JSON.stringify()。Axios会自动帮你完成JSON序列化，并且确保特殊字符不会被错误编码。

修改后的Axios代码 #

const response = await axios.post(
    `${BASEURL}auth/users/activate/`,
    {
      activation_code: values.otp,
      activation_token: token,
    },
    {
      headers: {
        Accept: "*/*",
        "Content-Type": "application/json",
      },
    }
);

或者可以省略手动设置的Content-Type，Axios会自动添加正确的请求头：

const response = await axios.post(
    `${BASEURL}auth/users/activate/`,
    {
      activation_code: values.otp,
      activation_token: token,
    },
    {
      headers: {
        Accept: "*/*",
      },
    }
);

后端代码无需修改，只要前端传入原始的token，signer.unsign_object就能正常解析验签。

内容的提问来源于stack exchange，提问作者Ramon Rasheed