React+DRF应用移动端无法登录但桌面正常的问题求助

我部署的Web应用前端基于React构建，后端采用Django Rest Framework开发。桌面/笔记本设备上注册登录功能正常，但移动端无法完成登录操作。已尝试多款移动浏览器，问题依旧。推测API认证请求可能成功，但登录状态处理或跳转环节存在问题——移动端验证凭据通过后，无法创建token/会话，登录时sessionStorage和localStorage为空。

后端（Django API）配置 #

settings.py #

CORS_ALLOW_CREDENTIALS = True

CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
    "https://pinch-5e6e24dd12fc.herokuapp.com"
]

REST_AUTH = {
    'USE_JWT': True,
    'JWT_AUTH_HTTPONLY': False,
    'JWT_AUTH_COOKIE': 'auth-token',
    'JWT_AUTH_REFRESH_COOKIE': 'refresh-token',
    'JWT_AUTH_SECURE': True,
    'JWT_AUTH_SAMESITE': 'None',
    'USER_DETAILS_SERIALIZER': 'pinch_api.serializers.CurrentUserSerializer',
}

CSRF_TRUSTED_ORIGINS = [
    'https://pinch-api-f947cf5f7bdc.herokuapp.com',
]

views.py #

from .settings import REST_AUTH
JWT_AUTH_COOKIE = REST_AUTH['JWT_AUTH_COOKIE']
JWT_AUTH_REFRESH_COOKIE = REST_AUTH['JWT_AUTH_REFRESH_COOKIE']
JWT_AUTH_SAMESITE = REST_AUTH['JWT_AUTH_SAMESITE']
JWT_AUTH_SECURE = REST_AUTH['JWT_AUTH_SECURE']
USER_DETAILS_SERIALIZER = ['pinch_api.serializers.CurrentUserSerializer']


@api_view()
def root_route(request):
    return Response({
        "message": "Welcome to the Pinch API"
    })


@api_view(['POST'])
def logout_route(request):
    response = Response()
    response.set_cookie(
        key=JWT_AUTH_COOKIE,
        value='',
        httponly=True,
        expires='Thu, 01 Jan 1970 00:00:00 GMT',
        max_age=0,
        samesite=JWT_AUTH_SAMESITE,
        secure=JWT_AUTH_SECURE,
    )
    response.set_cookie(
        key=JWT_AUTH_REFRESH_COOKIE,
        value='',
        httponly=True,
        expires='Thu, 01 Jan 1970 00:00:00 GMT',
        max_age=0,
        samesite=JWT_AUTH_SAMESITE,
        secure=JWT_AUTH_SECURE,
    )
    return response

前端（React）配置 #

axiosDefault.js #

axios.defaults.baseURL = 'https://pinch-api-f947cf5f7bdc.herokuapp.com/';
axios.defaults.headers.post['Content-Type'] = 'multipart/form-data';
axios.defaults.withCredentials = true;

export const axiosReq = axios.create(); 
export const axiosRes = axios.create();

export const loginUser = async (signInData) => {
    try {
      const { data } = await axios.post("/dj-rest-auth/login/", signInData);
      return data;
    } catch (error) {
      throw error.response?.data || error;
    }
  };

排查思路与解决建议 #

• Cookie跨域与移动端浏览器限制
  确认JWT_AUTH_SAMESITE: 'None'和JWT_AUTH_SECURE: True的组合生效：Heroku域名需完全启用SSL，部分移动浏览器（如Safari）对第三方Cookie限制严格，可测试关闭“防止跨网站跟踪”选项验证是否为浏览器限制导致；若条件允许，将前端和API调整为同主域名/子域名，降低跨域层级。

• Axios请求配置优化
  登录请求改用自定义的axiosReq.post发起，确保继承withCredentials配置；将Content-Type从multipart/form-data改为application/json，避免移动端浏览器对表单数据解析异常。

• Token存储逻辑检查
  因JWT_AUTH_HTTPONLY设为False，需确认登录成功后是否有代码将token存入sessionStorage/localStorage，比如：

  const data = await loginUser(signInData);
  localStorage.setItem('auth-token', data.access_token); // 需匹配API返回的字段名
  

  移动端sessionStorage在页面刷新后会清空，建议改用localStorage或Cookie存储状态。

• API端日志排查
  在Django后端添加登录请求日志，记录请求头、响应Cookie信息，验证是否正确设置了SameSite和Secure属性，确认移动端请求是否正常到达并返回token。

• CSRF Token验证
  检查前端是否在登录前通过GET /dj-rest-auth/csrf/获取CSRF token，确保Axios携带X-CSRFToken请求头，避免移动端因CSRF验证失败导致登录状态无法维持。

内容的提问来源于stack exchange，提问作者Mus Ali