持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情
为什么会出现跨域？
只要域名端口协议有一个不同, 就是跨域了~
当下, 最流行的就是**前后分离开发项目,也就是前端项目和后端接口**并不在一个域名之下，
那么前端项目开发时, 去访问后端接口就会存在**跨域**的行为.
解决开发环境的跨域问题
开发环境的跨域
开发环境的跨域，也就是在**vue-cli脚手架环境**下开发启动服务时，我们访问接口所遇到的跨域问题，
vue-cli为我们在本地**开启了一个服务,可以通过这个服务帮我们代理请求**,解决跨域问题
vue-cli的配置文件即**vue.config.js**,这里有我们需要的 代理选项
module.exports = {
devServer: {
// 代理配置
proxy: {
// 这里的api 表示如果我们的请求地址有/api的时候,就出触发代理机制
'/api': {
target: 'http://www.baidu.com', // 我们要代理请求的地址
// 路径重写
pathRewrite: {
// 路径重写 localhost:8888/api/login => www.baidu.com/api/login
'^/api': '' // 假设我们想把 localhost:8888/api/login 变成www.baidu.com/login 就需要这么做
}
},
}
}
}
以上就是我们在vue-cli项目中配置的代理设置
接下来,我们在代码中将要代理的后端地址变成 后端接口地址
// 代理跨域的配置
proxy: {
// 当我们的本地的请求 有/api的时候，就会代理我们的请求地址向另外一个服务器发出请求
'/api': {
target: 'http://ihrm-java.itheima.net/', // 跨域请求的地址
}
}
本节注意：我们并没有进行**pathRewrite, 因为后端接口就是ihrm-java.itheima.net/api**这种格式,所以不需要重写
**vue.config.js**的改动如果要生效,需要进行重启服务
同时，还需要注意的是，我们一定要注释掉(或删除) mock的加载，因为mock-server会导致代理服务的异常
// before: require('./mock/mock-server.js'), // 注释mock-server加载
修改请求地址, 走代理
const loginUrl = 'http://localhost:8888/api/sys/login' // 走代理
this.$request.post(loginUrl, this.loginForm).then(res => {
console.log(res)
})
最终效果图:
生产环境的跨域
生产环境表示我们已经开发完成项目，将项目部署到了服务器上,这时已经没有了vue-cli脚手架的**辅助**了，
我们只是把打包好的**html+js+css**交付运维人员，放到服务器而已, 如果此时还是跨域,
一般可以借助**Nginx**进行代理, 请阅读这篇文章Nginx反向代理, 或者后台开启 cors
提交代码
注意：我并没有进行**pathRewrite,因为后端接口就是ihrm-java.itheima.net/api**这种格式,所以不需要重写
vuex持久化
刚才在登录时, 已经可以成功的将token存到 vuex 中了, 但是 vuex 刷新会丢失, 所以需要结合web存储进行持久化
之前我们是用的localStorage存的token, 这里用cookie 也能存token
且在**utils/auth.js中,基础模板已经为我们提供了获取token,设置token,删除token**的方法,可以直接使用
只需要将存储的key放置成特定值即可
import Cookies from 'js-cookie'
const TokenKey = 'hrsaas_hm_75_token'
export function getToken() {
return Cookies.get(TokenKey) || null
}
export function setToken(token) {
return Cookies.set(TokenKey, token)
}
export function removeToken() {
return Cookies.remove(TokenKey)
}
1 一进来优先从缓存cookie中取
const state = {
// 一进来优先从缓存中取
token: getToken() || '' // token字符串或兜底字符串
}
2 vuex中存token时, 也同步存到cookie中
import {settoken，gettoken} from '@/utils/auth.js'
const mutations = {
// 设置token
setToken(state, newToken) {
state.token = newToken
// 设置了 token 的同时, 同步到本地cookies中
setToken(newToken)
}
}
效果: 刷新后, token 还是有的, 持久化存储了
