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 相关文章推荐
不要小看注释掉的JS 引起的安全问题
Dec 27 Javascript
JS 判断代码全收集
Apr 28 Javascript
jquery里的正则表达式说明
Aug 03 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
Jul 27 Javascript
JS原型链怎么理解
Jun 27 Javascript
JavaScript使用键盘输入控制实现数字验证功能
Aug 19 Javascript
JavaScript编码风格指南(中文版)
Aug 26 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
Apr 10 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
Sep 20 Javascript
小程序实现左滑删除效果
Jul 25 Javascript
微信小程序实现手势滑动卡片效果
Aug 26 Javascript
原生JS实现记忆翻牌游戏
Jul 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数组函数序列之array_combine() - 数组合并函数使用说明
2011/10/29 PHP
php使用Cookie控制访问授权的方法
2015/01/21 PHP
PHP使用preg_split()分割特殊字符(元字符等)的方法分析
2017/02/04 PHP
无语,javascript居然支持中文(unicode)编程!
2007/04/12 Javascript
NodeJS的模块写法入门(实例代码)
2012/03/07 NodeJs
js转义字符介绍
2013/11/05 Javascript
js实现同一页面多个运动效果的方法
2015/04/10 Javascript
详述JavaScript实现继承的几种方式(推荐)
2016/03/22 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
2016/03/28 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
2016/06/12 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
2016/08/10 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
2017/03/02 Javascript
微信小程序视图template模板引用的实例详解
2017/09/20 Javascript
iframe高度自适应及隐藏滚动条的实例详解
2017/09/29 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
2018/09/14 Javascript
微信小程序全局变量功能与用法详解
2019/01/22 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
javascript使用Blob对象实现的下载文件操作示例
2020/04/18 Javascript
JQuery使用数组遍历跳出each循环
2020/09/01 jQuery
ant design的table组件实现全选功能以及自定义分页
2020/11/17 Javascript
记录Django开发心得
2014/07/16 Python
在Python中处理字符串之ljust()方法的使用简介
2015/05/19 Python
python将ansible配置转为json格式实例代码
2017/05/15 Python
python3.6.3+opencv3.3.0实现动态人脸捕获
2018/05/25 Python
Win10下python 2.7.13 安装配置方法图文教程
2018/09/18 Python
python如何求解两数的最大公约数
2018/09/27 Python
详解如何用python实现一个简单下载器的服务端和客户端
2019/10/28 Python
Tensorflow进行多维矩阵的拆分与拼接实例
2020/02/07 Python
美国奢侈品购物平台:Orchard Mile
2018/05/02 全球购物
Bose美国官网:购买Bose耳机和音箱
2019/03/10 全球购物
咨询公司各岗位职责
2013/12/02 职场文书
开会迟到检讨书
2014/02/03 职场文书
关于感恩的演讲稿500字
2014/08/26 职场文书
最美护士演讲稿
2014/08/27 职场文书
临时租车协议范本
2014/09/23 职场文书
2014年中职班主任工作总结
2014/12/16 职场文书