乐趣区

解决post请求不携带cookie以及cookie的坑

起因

  • 小徐和朋友决心搭建一个网站,小徐负责前端,后端的话,域名已经申请完毕,一些接口也已经做好了。小徐在 本机 使用 vuecli 开发。
  • 由于 localhost 和网站存在跨域,需要设置代理:proxy:"https://www.t2c.site"(坑所在,待会详讲!)

代码部分:

<template>
    <b-img src="/user/checkCode?k=0.1" onclick="this.src='/checkCode?k='+Math.random()"></b-img>
    //account、password 部分是两个 input 按钮、省略
    <button type="button" id="login-button" @click="submit">Login</button>
</template>
<script>
export default {data()
    {
        return{
            account:'',
            password:'',
            checkCode:''
        }
    },
    methods:{submit(){
            this.axios.post('/user/login', 
            {
            account: this.account,
            password: this.password,
            checkCode: this.checkCode
            },{withCredentials:true})
            .then((response) =>{console.log(response.data);
            })
            .catch((error)=> {console.log(error);
            });

        }
    }
}
</script>

问题描述

  • 需要 post 请求发送 account、password、checkCode 到后端,但由于无法携带 cookie 验证码一直比对错误
  • 已经按网上方法设置:(依旧无济于事)
前端 main.js:axios.defaults.withCredentials=true;

后端已设置:Access-Control-Allow-Credentials: true

解决方法

就是补全域名!!!

 <b-img src="https://www.t2c.site/user/checkCode?k=0.1" onclick="this.src='https://www.t2c.site/checkCode?k='+Math.random()"></b-img>
 this.axios.post('https://www.t2c.site/user/login'

三个请求地址必须补全,缺一不可。

原理解析

  • 这是因为 cookie 的 domain 引起,可以看到 domain 在后端设置为www.t2c.site;这规定了这个 cookie 只有在请求域名为 www.t2c.site 时才会被携带发送到后端

  • 而我们起初的的 requseturl 仍为 hocalhost
  • 这就说明即使使用 proxy 代理,请求 url 如果不补齐的话,默认仍是本地的请求
  • proxy 代理后虽然能访问到验证码图片,却不会改变 request url。(这里我也没太懂 proxy 代理的原理,只是猜想。如果有错,希望大佬指出)

  • 所以只要补全 request url 就能确保携带 url

验证

  • 如果补全 img_src 和 axios 请求的 url,就能自动识别 request url,并携带 cookie 信息过去

结语

  • 最终能解决这个困扰了一天多问题,真的很激动。于是写下了这篇文章。
  • 希望大佬不吝赐教,平时只有另一个小伙伴,两个人举步维艰。
  • 有很多原理都只是猜想,没来得及查阅文献。如果有错,希望大家指出!
退出移动版