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

这是浏览器中的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})}
);

------------------------------OR---------------- ------------------

把它放在最上面：

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'
)

Cookie 未存储在浏览器中

1 个答案: