请求带cookie和token的方法

最新推荐文章于 2025-09-20 12:03:44 发布

原创最新推荐文章于 2025-09-20 12:03:44 发布 · 2.5k 阅读

5 ·

CC 4.0 BY-SA版权

本文介绍了如何在PC端前端开发中，针对AJAX、CORS、Fetch和axios跨域请求设置cookie携带策略，并重点讲解了在移动端模拟PC环境调试时的注意事项。

前端进行数据请求有：普通的ajax(json)请求，jsop跨域请求，cors跨域请求，fetch请求…PC端这些请求方式中，普通的ajax(json)请求和jsop跨域请求是默认携带cookie的，而cors跨域请求和fetch请求默认是不携带cookie的。因此，当我们的请求需要携带cookie时，我们就要对cors跨域请求和fetch请求这两中请求方式进行特殊配置处理。对于做移动端的童鞋来说，要是能把项目运行在PC端中最好不过，对于调试过程中的BUG一目了然，所以做特殊处理后更有利于我们在PC端进行调试。

我们要在请求头中添加上这个配置：
credentials: ‘include’

fetch('/community/getCommunityActivityByCommunityId', {
    method: "POST",
    headers: {
        "Content-Type": "application/x-www-form-urlencoded"
    },
credentials: 'include',
    body:"communityId="+this.props.location.query.communityId
})
    .then((res) => { return res.json(); })
    .then((data) => {
       //请求成功
    })
    .catch((e) => {
//报错
    });

axios跨域携带cookie
axios.defaults.withCredentials = true

axios( url: '***', method: 'post',  withcredentials: true ) //携带cookie
axios( url: '***', method: 'post',  withcredentials: false ) //不携带cookie
也可以通过以下方式设置：

axios.defaults.withCredentials = true;

axios携带token
window.sessionStorage.setItem(‘cat_token’, res.data.token)