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 相关文章推荐
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
多种方法实现JS动态添加事件
Nov 01 Javascript
浅析用prototype定义自己的方法
Nov 14 Javascript
jQuery Chart图表制作组件Highcharts用法详解
Jun 01 Javascript
js html css实现复选框全选与反选
Oct 09 Javascript
Javascript的console['']常用输入方法汇总
Apr 26 Javascript
用原生 JS 实现 innerHTML 功能实例详解
Apr 03 Javascript
vue组件之间的数据传递方法详解
Apr 19 Javascript
JavaScript this在函数中的指向及实例详解
Oct 14 Javascript
超简单的微信小程序轮播图
Nov 22 Javascript
微信小程序实现页面浮动导航
Jan 08 Javascript
JS实现炫酷轮播图
Nov 15 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常用字符串的总结(待续)
2013/06/07 PHP
php模拟ping命令(php exec函数的使用方法)
2013/10/25 PHP
php创建session的方法实例详解
2015/01/27 PHP
PHP自带方法验证邮箱是否存在
2016/02/01 PHP
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
PHP如何实现阿里云短信sdk灵活应用在项目中的方法
2019/06/14 PHP
DHTML 中的绝对定位
2006/11/26 Javascript
js类型检查实现代码
2010/10/29 Javascript
jQuery1.6 使用方法一
2011/11/23 Javascript
jsp网页搜索结果中实现选中一行使其高亮
2014/02/17 Javascript
javascript 中的 delete及delete运算符
2015/11/15 Javascript
JS实现的点击表头排序功能示例
2017/03/27 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
2017/04/12 Javascript
利用npm 安装删除模块的方法
2018/05/15 Javascript
Nuxt.js SSR与权限验证的实现
2018/11/21 Javascript
微信小程序全局变量功能与用法详解
2019/01/22 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
2019/08/23 Javascript
关于JS模块化的知识点分享
2019/10/16 Javascript
Python标准库之循环器(itertools)介绍
2014/11/25 Python
python基于windows平台锁定键盘输入的方法
2015/03/05 Python
python 全局变量的import机制介绍
2017/09/07 Python
分析Python中解析构建数据知识
2018/01/20 Python
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
new_zeros() pytorch版本的转换方式
2020/02/18 Python
jupyter notebook实现显示行号
2020/04/13 Python
HTML5触摸事件(touchstart、touchmove和touchend)的实现
2020/05/08 HTML / CSS
世界上最大的街头服饰网站:Karmaloop
2017/02/04 全球购物
几个SQL的面试题
2014/03/08 面试题
20年同学聚会感言
2014/02/03 职场文书
大型晚会策划方案
2014/02/06 职场文书
商务日语专业毕业生自荐信
2014/03/27 职场文书
党员个人整改方案及措施
2014/10/25 职场文书
调解书格式范本
2015/05/20 职场文书
Mysql官方性能测试工具mysqlslap的使用简介
2021/05/21 MySQL
关于springboot配置druid数据源不生效问题(踩坑记)
2021/09/25 Java/Android