踩坑记5 axios 跨域请求(vite)、el-form、el-input 回车提交、通过 ref 获取修改html元素

2021.7.27

axios、网络请求、跨域请求、回车提交、动态修改html元素

坑14（axios、跨域请求、vite、proxy代理）：在调用axios时直接传绝对地址会报错："...has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. CustomerInfo.vue:22 Error: Network Error"。原因是被CORS协议阻止了跨域请求。需要在vite.config.js中进行如下配置：

// server与plugins平级

  server:{

    proxy:{

      // '代理地址':'真实请求地址'

      '/api':'https://api.cat.com/color'

    }

  }

之后调用axios时传代理地址 '/api' 即可。例：axios.get('/api?cat=black')

参考： Vite通过代理（proxy）配置axios跨域 - 铁憨憨的小小白 - 博客园 (cnblogs.com)

vite官方文档server.proxy： 配置 Vite | Vite 官方中文文档 (vitejs.dev)

坑15（element-plus、el-form、el-input、回车提交）：在使用el-form包裹el-input和el-button后，回车提交的结果是刷新网页。解决方法：可以在el-form中添加@submit.prevent='sendMsg'，sendMsg()即点击按钮时的触发效果；或者在el-form中添加@submit.prevent，并在el-input中添加@keyup.enter='sendMsg'。

// 方法一

    <el-form @submit.prevent='sendMsg'>

        <el-input type="text" v-model.trim="QContent"/>

        <el-button @click='sendMsg'>发送</el-button>

    </el-form>

// 方法二

    <el-form @submit.prevent>

        <el-input type="text" v-model.trim="QContent" @keyup.enter='sendMsg'/>

        <el-button @click='sendMsg'>发送</el-button>

    </el-form>

坑16（vue3、ref、插入html）：使用innerHTML或insertAdjacentHTML()即可向已有html元素动态地替换或插入子元素。

首先使用ref属性标记目标元素<div ref="divRef"></div>，之后在setup()中设置对应的响应式对象const divRef=ref(null)并暴露return { divRef }。之后使用调用divRef.value.innerHTML='...'或divRef.value.insertAdjacentHTML(position,'...')即可。例：

//  替换子元素用innerHTML

divRef.value.innerHTML='第一行<br>第二行'



/*  插入子元素insertAdjacentHTML

* 'beforebegin'：元素自身的前面。

* 'afterbegin'：插入元素内部的第一个子节点之前。

* 'beforeend'：插入元素内部的最后一个子节点之后。

* 'afterend'：元素自身的后面。  */

divRef.value.insertAdjacentHTML('beforeend','第一行<br>第二行')

参考MDN Web文档： 

element.innerHTML - Web API 接口参考 | MDN (mozilla.org)

element.insertAdjacentHTML - Web API 接口参考 | MDN (mozilla.org)

by 莫得感情踩坑机(限定)