携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第22天
一、active-class
首先 active-class 是 vue-router 模块中 router-link 组件中的属性，主要作用是用来实现选
中样式的切换，在 vue-router 中要使用 active-class 有两种方式：
1.在 router-link 中写入 active-class
active-class 选择样式时根据路由中的路径（to=“/home”）去匹配，然后显示
首页
2.直接在路由 js 文件中配置 linkActiveClass
export default new Router({
linkActiveClass: 'active',
})
3.引起的问题
因为 to="/" 引起的，active-class 选择样式时根据路由中的路径去匹配，然后显示，例如在 my 页面中，路由为 localhost:8081/#/my，那么 to="/”和 to="/my"都可以匹配到，所有都会激活选中样式
4.解决方法
1）在 router-link 中写入 exact
首页
2）在路由中加入重定向
首页
{
path: '/',
redirect: '/home'
}
二、vue 实现跨域
1.什么是跨域
跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议，端口，域名。只要这个 3 个中有一个不同就是跨域
2.使用 vue-cli 脚手架搭建项目时 proxyTable 解决跨域问题打开 config/index.js,在 proxyTable 中添写如下代码：
proxyTable: {
'/api': { //使用"/api"来代替"f.apiplus.c"
target: 'f.apiplus.cn', //源地址
changeOrigin: true, //改变源
pathRewrite: {
'^/api': 'f.apiplus.cn' //路径重写
}
3.使用 CORS（跨域资源共享）
1）前端设置：
前端 vue 设置 axios 允许跨域携带 cookie（默认是不带 cookie）
axios.defaults.withCredentials = true;
2）后端设置：
a.跨域请求后的响应头中需要设置：
b.Access-Control-Allow-Origin 为发起请求的主机地址。
c.Access-Control-Allow-Credentials，
当它被设置为 true 时，允许跨域带cookie，但此时 Access-Control-
Alow-Origin 不能为通配符*。
d.Access-Control-Allow-Headers，设置跨域请求允许的请求头。
e.Access-Control-Allow-Methods，设置跨域请求允许的请求方式。
