如何修复React+Django+Axios中‘部分Cookie滥用SameSite属性’警告

错误原因 #

你在axios请求配置里加SameSite字段是错误的——Cookie的SameSite属性是由后端在设置Cookie时指定的，前端请求根本没法控制这个属性，所以这么写会直接触发请求错误。Firefox的警告也是因为后端设置Cookie时未指定SameSite值，浏览器使用旧默认策略才弹出提示。

正确解决方案：修改Django后端代码 #

直接在Django视图的set_cookie方法里添加SameSite参数，根据部署环境选择对应配置：

1. 生产环境（HTTPS部署）

如果网站是HTTPS环境，需要设置SameSite='None'，同时必须加上secure=True（浏览器强制要求SameSite=None的Cookie只能通过HTTPS传输）：

response.set_cookie(
    key='jwt',
    value=token,
    httponly=True,
    samesite='None',
    secure=True,
    max_age=60*60  # 和JWT的60分钟过期时间对应，可选但建议添加
)

2. 本地开发环境（HTTP）

本地开发一般用HTTP协议，这时候不能用SameSite='None'（浏览器会拒绝保存该Cookie），换成SameSite='Lax'即可，无需添加secure：

response.set_cookie(
    key='jwt',
    value=token,
    httponly=True,
    samesite='Lax',
    max_age=60*60
)

前端axios配置修正 #

删掉之前添加的SameSite字段，只保留withCredentials: true即可，正确的axios配置如下：

const loginRequest = (values) => {
    axios
      .post(
        "/api/login",
        {
          email: values.email,
          password: values.password,
        },
        {
          withCredentials: true,
          headers: {
            'Content-Type': 'application/json',
          }
        }
      )
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
};

修改完成后，Firefox的SameSite属性警告会消失，请求也不会再报错。

内容的提问来源于stack exchange，提问作者TF Ryzen