本文共 869 字，大约阅读时间需要 2 分钟。
开发环境的跨域 , 也就是在vue-cli脚手架环境下开发启动服务器时 , 我们访问接口所遇到的跨域问题 , vue-cli为我们在本地开启了一个服务 , 可以通过这个服务帮我们代理请求 , 解决跨域. 这就是vue-cli配置webpack的反向代理
采用vue-cli的代理配置
vue-cli的配置文件即vue.config.js , 这里有我们需要的代理选项
module.exports = { devServer: { // 代理配置 proxy: { // 这里的api 表示如果我们的请求地址有/api的时候 , 就会触发代理机制 // localhost:8888/api/abc => 代理给另一个服务器 // 本地的前端 => 本地的后端 => 代理我们向另一个服务器发请求 // 本地的前端 => 另一个服务器发请求(跨域) '/api': { // 我们要代理的地址 target: '', // 是否跨域 需要设置此值为true 才可以让本地服务器代理我们发出请求 changeOrigin: true, // 路径重写 pathRewrite: { // 重新路由 localhost:8888/api/login => www.baidu.com/api/login '^/api': '' // 假设我们想把localhost:8888/api/login 变成www.baidu.com/login 就需要这么做 } } } }}
生产环境的跨域
生产环境表示我们已经开发完成项目 , 将项目部署到服务器上 , 这时候已经没有vue-cli脚手架的辅助 , 我们只是把打包好的html+css+js , 交付运维人员 , 放到Nginx服务器而已 , 所以此时需要借助Nginx的反向代理来进行
转载地址：http://xoswn.baihongyu.com/