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 相关文章推荐
JavaScript DOM 学习第九章 选取范围的介绍
Feb 19 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
Nov 11 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
Feb 12 Javascript
jQuery简单tab切换效果实现方法
Apr 08 Javascript
jquery实现表单验证并阻止非法提交
Jul 09 Javascript
JS函数定义方式的区别介绍
Mar 22 Javascript
JS简单获取及显示当前时间的方法
Aug 03 Javascript
Angular 中 select指令用法详解
Sep 29 Javascript
利用浮层使select不可选的实现方法
Dec 03 Javascript
React父子组件间的传值的方法
Nov 13 Javascript
Nuxt.js开启SSR渲染的教程详解
Nov 30 Javascript
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
客户端(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 页面跳转到另一个页面的多种方法方法总结
2009/07/07 PHP
php字符串分割函数explode的实例代码
2013/02/07 PHP
改写函数实现PHP二维/三维数组转字符串
2013/09/13 PHP
Yii2配置Nginx伪静态的方法
2017/05/05 PHP
在laravel5.2中实现点击用户头像更改头像的方法
2019/10/14 PHP
avalonjs制作响应式瀑布流特效
2015/05/06 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
2016/04/01 Javascript
微信jssdk用法汇总
2016/07/16 Javascript
AngularJS用户选择器指令实例分析
2016/11/04 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
AngularJS中run方法的巧妙运用
2017/01/04 Javascript
js实现用户输入的小写字母自动转大写字母的方法
2017/01/21 Javascript
JavaScript编写一个贪吃蛇游戏
2017/03/09 Javascript
nodejs express配置自签名https服务器的方法
2018/05/22 NodeJs
详解React 的几种条件渲染以及选择
2018/10/23 Javascript
vue3.0中使用postcss-pxtorem的具体方法
2019/11/20 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
2019/12/19 Javascript
35个Python编程小技巧
2014/04/01 Python
Python利用ElementTree模块处理XML的方法详解
2017/08/31 Python
Python统计单词出现的次数
2018/04/04 Python
seek引发的python文件读写的问题及解决
2019/07/26 Python
有关Tensorflow梯度下降常用的优化方法分享
2020/02/04 Python
tensorflow 初始化未初始化的变量实例
2020/02/06 Python
Python3如何使用多线程升程序运行速度
2020/08/11 Python
java字符串格式化输出实例讲解
2021/01/06 Python
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
 Alo Yoga官网:购买瑜伽服装
2018/06/17 全球购物
机电一体化职业规划书
2014/01/07 职场文书
最新奶茶店创业计划书
2014/01/25 职场文书
小学生勤俭节约倡议书
2015/04/29 职场文书
职位证明模板
2015/06/23 职场文书
外出学习心得体会范文
2016/01/18 职场文书
pytorch中的numel函数用法说明
2021/05/13 Python
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript
centos环境下nginx高可用集群的搭建指南
2022/07/23 Servers