React不设置cookie，但Postman做到了吗？

发布于 2025-01-24 09:30:18 字数 981 浏览 1 评论 0原文

我有一个弹簧引导后端，允许用户登录。

当我使用Postman发送JSON有效载荷以登录用户时，它会以cookie返回正确的响应以进行JSession。

当我在React（AXIOS）发送有效载荷时，我不会在任何地方都看到cookie的JSession，但回应还可以吗？

const API_URL = "http://localhost:8080/api/auth/";


login(uniqueId: string, password: string) {
    return axios.post(API_URL + "login", JSON.stringify({
            "uniqueId": uniqueId,
            "password": password
        }), 
        {
            headers: {
                'Content-Type': 'application/json',
                'withCredentials': 'true'
            }
        })
        .then(response => {
            console.log(response);
            return response;
        }).catch(error => {
            return error.response
    });
}

带响应的chrome tab，no cookie

原文

I have a spring boot backend that allows a user to login.

When I use postman to send a json payload to login in a user it returns the correct response with a cookie for a JSESSION.

Postman details with response and cookie

When I send the payload in react (axios) I don't see the cookie for the JSESSION anywhere but the response is still okay ?

const API_URL = "http://localhost:8080/api/auth/";


login(uniqueId: string, password: string) {
    return axios.post(API_URL + "login", JSON.stringify({
            "uniqueId": uniqueId,
            "password": password
        }), 
        {
            headers: {
                'Content-Type': 'application/json',
                'withCredentials': 'true'
            }
        })
        .then(response => {
            console.log(response);
            return response;
        }).catch(error => {
            return error.response
    });
}

Chrome tab with response and no cookie

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

二智少女 2025-01-31 09:30:18

'withCredentials'：'true' shoud在标题（请求config documentStion ）

是：

const API_URL = "http://localhost:8080/api/auth/";


login(uniqueId: string, password: string) {
    return axios.post(API_URL + "login", JSON.stringify({
            "uniqueId": uniqueId,
            "password": password
        }), 
        {
            withCredentials: true,
            headers: {
                'Content-Type': 'application/json'
            }
        })
        .then(response => {
            console.log(response);
            return response;
        }).catch(error => {
            return error.response
    });
}

另一个解决方案是使用参数withCredentials创建实例轴：true（创建axios实例）。

const BASE_URL = "http://localhost:8080/api/";
const api = axios.create({
baseURL: BASE_URL,
withCredentials: true,
headers: {'Content-Type': 'application/json'}
});

然后您可以做：

 return api.post("/auth/login", JSON.stringify({
            "uniqueId": uniqueId,
            "password": password
        })) .then(response => {
            console.log(response);
            return response;
        }).catch(error => {
            return error.response
    });

'withCredentials': 'true' shoud be outside of headers (Request Config documentstion)

In your case it would be:

const API_URL = "http://localhost:8080/api/auth/";


login(uniqueId: string, password: string) {
    return axios.post(API_URL + "login", JSON.stringify({
            "uniqueId": uniqueId,
            "password": password
        }), 
        {
            withCredentials: true,
            headers: {
                'Content-Type': 'application/json'
            }
        })
        .then(response => {
            console.log(response);
            return response;
        }).catch(error => {
            return error.response
    });
}

another solution is create instance axios with parametr withCredentials: true (creating axios instance).

const BASE_URL = "http://localhost:8080/api/";
const api = axios.create({
baseURL: BASE_URL,
withCredentials: true,
headers: {'Content-Type': 'application/json'}
});

and then you can do:

 return api.post("/auth/login", JSON.stringify({
            "uniqueId": uniqueId,
            "password": password
        })) .then(response => {
            console.log(response);
            return response;
        }).catch(error => {
            return error.response
    });

回复收藏 0 原文

~没有更多了~