关于 Vue 的那点事儿~(十四)

95 阅读1分钟

Vue 实现跨域的方式

跨域

跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议,端口,域名。只要这个 3 个中有一个不同就是跨域

使用 Vue-cli 脚手架搭建项目时 proxyTable 可以解决跨域问题

打开 config/index.js,在 proxyTable 中添写如下代码:

proxyTable: {

'/api': { //使用"/api"来代替"http://f.apiplus.c"

target: 'http://f.apiplus.cn', //源地址

changeOrigin: true, //改变源

pathRewrite: {

'^/api': 'http://f.apiplus.cn' //路径重写

}

使用 CORS(跨域资源共享)

  1. 前端设置: 前端 Vue 设置 axios 允许跨域携带 cookie(默认是不带 cookie)axios.defaults.withCredentials = true;

  2. 后端设置: (1) 跨域请求后的响应头中需要设置: (2) Access-Control-Allow-Origin 为发起请求的主机地址。 (3) Access-Control-Allow-Credentials,当它被设置为 true 时,允许跨域带 cookie,但此时 Access-Control-Allow-Origin 不能为通配符*。 (4) Access-Control-Allow-Headers,设置跨域请求允许的请求头。 (5) Access-Control-Allow-Methods,设置跨域请求允许的请求方式。

Vue 中动画如何实现

哪个元素需要动画就给那个元素加 transition 标签
进入时 class 的类型分为以下几种
<name>-enter <name>-enter active <name>-enter-to
离开时 class 的类型分为以下几种:
<name>-leave <name>-leave-active <name>-leave-to
如果需要一组元素发生动画需要用标签