reactjs - Cookie 未存储在浏览器中

Question

与 Next.js 合作和 Django Rest Framework ，我正在使用 JWT 对用户进行身份验证。首先，当用户成功登录页面时，一个 cookie(包含 JWT token )被发送到浏览器。当用户尝试访问特定页面时，此 cookie 用于验证请求。我在浏览器中存储 cookie 时遇到问题。
Django |登录功能

@api_view(['POST'])
@permission_classes((permissions.AllowAny,))
def login(request):
 ...

response = Response()
response.set_cookie(key='jwt', value=token, httponly=True, max_age=86400)
response.data ={
    'message': 'success',
}
return response

这是我获取/api/login 的方式
下一页 |登录.js

        var axios = require('axios');
        var FormData = require('form-data');
        var data = new FormData();
        data.append('email', this.state.email);
        data.append('password', this.state.password);
        data.append('X-CSRFToken', csrftoken);
        data.append('mode', 'same-origin');
        data.append('Content-Type', 'application/json');

        
        var config = {
            method: 'post',
            credentials: 'include', #I'm probably having issues with this
            url: 'http://localhost:8000/api/login',
            data : data
        };

        axios(config)
        .then(res=> {
          console.log('success'); #I got logged, but cookie is not stored
        })
        .catch(
            error=>{this.setState({isError:true})}
        );

这是浏览器中的 set-cookie:


但是 JWT缺少存储:

如您所见，在它们两个中，我都收到了名为 JWT 的 cookie。但它没有存储在浏览器中。
提前感谢您的时间和答案!

Answer 1

它是 重要 需要注意的是mode , credentials不支持配置 Axios .它适用于fetch api因为这些选项是 Request API 的一部分(模式的文档是 here )。
Axios 使用 XMLHttpRequest在引擎盖下，而不是 Request .
试试这个 :

var axios = require('axios');
var FormData = require('form-data');
var data = new FormData();
data.append('email', this.state.email);
data.append('password', this.state.password);

const headers = {
  'Content-Type': 'application/json',
  'X-CSRFToken': csrfToken
}

var config = {
    method: 'post',
    withCredentials: true,
    url: 'http://localhost:8000/api/login',
    data : data,
    {headers: headers}
};

axios(config)
.then(res=> {
  console.log('success');
})
.catch(
    error=>{this.setState({isError:true})}
);

- - - - - - - - - - - - - - - 或者 - - - - - - - - - - ---------------
把这个放在顶部 :

axios.defaults.withCredentials = true
axios.defaults.xsrfHeaderName = "X-CSRFTOKEN";
axios.defaults.xsrfCookieName = "csrftoken";

这必须在 Django 中:
设置.py :

CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_WHITELIST = (
    'http://localhost:3000',
    'http://localhost:8000'
)