持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情
为什么会出现跨域？
只要域名端口协议有一个不同的ajax请求, 就是跨域了~
当下, 最流行的就是 前后分离 开发项目,也就是 前端项目 和 后端接口 并不在一个域名之下，
那么前端项目开发时, 去访问后端接口就会存在**跨域**的行为.
请注意，我们所遇到的这种跨域是位于开发环境 (webpack代理服务器)，真正部署上线时的跨域是生产环境 (nginx服务器, 或者后台配cors)
解决开发环境的跨域问题
开发环境的跨域
开发环境的跨域，也就是在 vue-cli脚手架环境 下开发启动服务时，我们访问接口所遇到的跨域问题，
vue-cli为我们在本地 开启了一个服务,可以通过这个服务帮我们 代理请求,解决跨域问题
vue-cli的配置文件即 vue.config.js,这里有我们需要的代理选项
module.exports = {
devServer: {
// 代理配置
proxy: {
// 这里的api 表示如果我们的请求地址有/api的时候,就出触发代理机制
'/api': {
target: 'http://www.baidu.com', // 触发后把前面的路径修改为我们要代理请求的地址
//效果差不多就是把 localhost:8888/api/login => www.baidu.com/api/login
// 路径重写
pathRewrite: {
'^/api': '' // 假设我们想把 localhost:8888/api/login 变成www.baidu.com/login 就需要这么做 js把路径中的/api去掉
}
},
}
}
}
以上就是我们在vue-cli项目中配置的代理设置
vue.config.js 的改动如果要生效,需要进行重启服务
生产环境的跨域 (了解)
生产环境表示我们已经开发完成项目，将项目部署到了服务器上,这时已经没有了vue-cli脚手架的 辅助 了，
我们只是把打包好的 html+js+css 交付运维人员，放到服务器而已, 如果此时还是跨域,
一般可以借助 Nginx 进行代理, 或者后台开启 cors
