Cookie 未存储在浏览器中

Question

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

姜戈 |登录功能

@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})}
        );

这是浏览器中的设置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 中：

settings.py：

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