vue下跨域设置的相关介绍


Posted in Javascript onAugust 26, 2017

本文介绍了vue下跨域设置的相关介绍,分享给大家,具体如下:

1、在使用vue开发的时候经常要涉及到跨域的问题,其实在vue cli中是有我们设置跨域请求的文件的。

2、当跨域无法请求的时候我们可以修改工程下config文件夹下的index.js中的dev:{}部分。

dev: {

  env: require('./dev.env'),
  port: 8080,
  autoOpenBrowser: false,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: {
    '/api': {
      target: 'http://api.douban.com/v2',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    }
  },
  // CSS Sourcemaps off by default because relative paths are "buggy"
  // with this option, according to the CSS-Loader README
  // (https://github.com/webpack/css-loader#sourcemaps)
  // In our experience, they generally work as expected,
  // just be aware of this issue when enabling this option.
  cssSourceMap: false
}

将target设置为我们需要访问的域名。

3、然后在main.js中设置全局属性:

Vue.prototype.HOST = '/api'

4、至此,我们就可以在全局使用这个域名了,如下:

var url = this.HOST + '/movie/in_theaters'
  this.$http.get(url).then(res => {
   this.movieList = res.data.subjects;
  },res => {
   console.info('调用失败');
  });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - Draggable 可拖拽
Sep 29 Javascript
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
Nov 21 Javascript
jquery map方法使用示例
Apr 23 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
Mar 07 Javascript
jQuery中 bind的用法简单介绍
Feb 13 Javascript
webpack配置文件和常用配置项介绍
Apr 28 Javascript
微信小程序商品到详情的实现
Jun 27 Javascript
微信小程序之滚动视图容器的实现方法
Sep 26 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
Aug 22 Javascript
在vue中阻止浏览器后退的实例
Nov 06 Javascript
JS如何把字符串转换成json
Feb 21 Javascript
Ant Design Pro 之 ProTable使用操作
Oct 31 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
Aug 26 #Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
Jun 19 #Javascript
微信小程序实现顶部选项卡(swiper)
Jun 19 #Javascript
js实现本地时间同步功能
Aug 26 #Javascript
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 #jQuery
Javascript快速实现浏览器系统通知
Aug 26 #Javascript
深入浅出es6模板字符串
Aug 26 #Javascript
You might like
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
xmlHTTP实例
2006/10/24 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
2013/01/21 Javascript
node.js中的path.extname方法使用说明
2014/12/09 Javascript
jquery ui resize 中border-box的bug修正
2015/04/26 Javascript
JavaScript中的slice()方法使用详解
2015/06/06 Javascript
JavaScript操作XML文件之XML读取方法
2015/06/09 Javascript
javascript设计模式--策略模式之输入验证
2015/11/27 Javascript
jquery淡入淡出效果简单实例
2016/01/14 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
2016/06/07 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
2016/10/13 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
2016/10/28 Javascript
js 打开新页面在屏幕中间的实现方法
2016/11/02 Javascript
快速掌握jQuery插件开发
2017/01/19 Javascript
js实现倒计时效果(小于10补零)
2017/03/08 Javascript
微信小程序实现倒计时补零功能
2018/07/09 Javascript
angularJS自定义directive之带参方法传递详解
2018/10/09 Javascript
Vue创建头部组件示例代码详解
2018/10/23 Javascript
Javascript中弹窗confirm与prompt的区别
2018/10/26 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
2019/07/15 Javascript
vue实现井字棋游戏
2020/09/29 Javascript
Python基于Tkinter的HelloWorld入门实例
2015/06/17 Python
Python实现控制台中的进度条功能代码
2017/12/22 Python
在Pycharm中将pyinstaller加入External Tools的方法
2019/01/16 Python
Python3模拟curl发送post请求操作示例
2019/05/03 Python
关于Python核心框架tornado的异步协程的2种方法详解
2019/08/28 Python
Python实现发票自动校核微信机器人的方法
2020/05/22 Python
如何用 Python 制作一个迷宫游戏
2021/02/25 Python
男女时尚与复古风格在线购物:RoseGal(全球免费送货)
2017/07/19 全球购物
美国农场鲜花速递:The Bouqs
2018/07/13 全球购物
Stührling手表官方网站:男女高品质时尚手表的领先零售商
2021/01/07 全球购物
会计学自荐信
2014/06/03 职场文书
敬老院献爱心活动总结
2014/07/08 职场文书
大学生入党自荐书
2015/03/05 职场文书
胡桃夹子观后感
2015/06/11 职场文书
掌握一个领域知识,高效学习必备方法
2019/08/08 职场文书