Cookie 未存储在浏览器中 [英] Cookies not being stored in browser

问题描述

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

Working with Next.js and Django Rest Framework, I'm authenticating users using JWT. First, when the user successfully logs in to the page, a cookie (which contains the JWT token) is sent to the browser. When the user tries to access a specific page, this cookie is used to validate the petition. I'm having trouble storing the cookie in the browser.

姜戈 |登录功能

@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 的方式

And here is how I'm fetching /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:

Here is the set-cookie in the browser:

但是存储中缺少 JWT:

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

As you can see, in both of them I'm receiving the cookie named JWT. But it's not being stored in the browser. Thank you in advance for your time and answers!

推荐答案

重要要注意的是 mode、credentials 不是支持配置 Axios.它适用于 fetch api 因为这些选项是 Request API 的一部分(模式的文档是 此处).

It's important to note is that mode, credentials aren't supported for configuring Axios.It works in fetch api because those options are part of the Request API (docs for mode are here).

Axios 在底层使用 XMLHttpRequest，而不是请求.

Axios uses a XMLHttpRequest under the hood, not 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----------------------------------

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

把它放在最上面:

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

django 中必须:

This Must in django:

settings.py:

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

这篇关于Cookie 未存储在浏览器中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！