一个困扰我很久的问题,后端使用django+DRF框架开发api,前端使用vue+axios+element plus写的登录功能,后端已经设置了允许跨域,使用postman请求接口正常,但是使用浏览器登录时,后端返回[25/Apr/2024 18:13:13,193] - Broken pipe from ('127.0.0.1', 62281)
定位问题思路:
跨域设置成功,应该不是跨域的问题
前端直接用js脚本发axios请求,可以成功返回
只有浏览器点击登录触发@click事件时,后端接口才会抛出这个错误,于是找了一些代码对比,发现我的表单代码中少了@click.preven函数。
<template>
<div class="container b-container" id="b-container">
<form class="form" id="b-form" method="" action="" @click.prevent>
<h2 class="form_title title">登录网页</h2>
<div class="form__icons">
<img class="form__icon" src=" " />
<img class="form__icon" src=" " />
<img class="form__icon" src=" " />
</div>
<span class="form__span">使用邮箱账号</span>
<input
class="form__input"
type="text"
placeholder="用户名"
v-model="username"
/>
<input
class="form__input"
type="password"
placeholder="密码"
v-model="password"
/>
<a class="form__link">忘记密码?</a>
<button class="form__button button submit" @click="submit">登 录</button>
</form>
</div>
</template>
问题出现在第三行代码,如果没有加@click.prevent,点击button时,type是submit,在浏览器获取返回之前,会拒绝接收返回的内容,所以后端出现broken pipe。
总结:
有些标签属性自带了事件,但我们有时并不需要那些事件,因此就需要阻止默认事件,只执行我们绑定的事件。@click.prevent就可以帮我们实现这个效果。