一个困扰我很久的问题，后端使用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><inputclass="form__input"type="text"placeholder="用户名"v-model="username"/><inputclass="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就可以帮我们实现这个效果。
