起因
- 小徐和朋友决心搭建一个网站,小徐负责前端,后端的话,域名已经申请完毕,一些接口也已经做好了。小徐在 本机 使用 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 信息过去
结语
- 最终能解决这个困扰了一天多问题,真的很激动。于是写下了这篇文章。
- 希望大佬不吝赐教,平时只有另一个小伙伴,两个人举步维艰。
- 有很多原理都只是猜想,没来得及查阅文献。如果有错,希望大家指出!