vue-cli3跨域配置的简单方法
2019-09-06 10:41
387 查看
vue-cli3跨域配置:
在vue-resource的数据请求中,一般我们会将请求方式GET/POST修改为jsonp的请求方式就可以实现跨域。
但是对于只支持GET/POST两种请求方式的api,修改jsonp,就会出错。需要进行跨域的配置。
(1)在文件根目录下,创建vue.config.js配置文件,具体配置如下:
module.exports={ //将baseUrl:'/api',改为baseUrl:'/' baseUrl:'/', devServer:{ '/api':{ target:'http://apis.juhe.cn/', changeOrigin:true, ws:true, pathRewrite:{ '^/api':'' } } }}
(2)在文件根目录下,创建.env.development 用作开发环境变量设置。
在.env.development文件下设置变量 VUE_APP_BASE_API=/api 即可将devServer的proxy重写的url赋值给VUE_APP_BASE_API
(3)读取配置的变量,通过process.env.VUE_APP_XX(process.env.VUE_APP_BASE_API)来读取。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。
您可能感兴趣的文章:
相关文章推荐
- vue-cli脚手架config目录下index.js配置文件的方法
- 基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
- 详解vue-cli脚手架中webpack配置方法
- vue-cli 使用animate.css最简单的方法
- vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
- Vue-CLI 项目在pycharm中配置方法
- 详解vue-cli + webpack 多页面实例配置优化方法
- Apache虚拟目录配置及vue-cli反向代理的设置方法
- vue-cli创建的项目,配置多页面的方法
- vue-cli配置全局sass、less变量的方法
- vue.js简单配置axios的方法详解
- vue-cli创建的项目,配置多页面的实现方法
- vue-cli 引入、配置axios的方法
- vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
- vue-cli项目代理proxyTable配置exclude的方法
- vue-cli 3.x配置跨域代理的实现方法
- vue-cli3添加模式配置多环境变量的方法
- webpack+vue+express(hot)热启动调试简单配置方法
- vue-cli3配置与跨域处理方法
- Apache虚拟目录配置及vue-cli反向代理的设置方法