vue下跨域设置的相关介绍

 更新时间:2017年08月26日 16:16:12   作者:谢尔斯基托夫  
本篇文章主要介绍了vue下跨域设置的相关介绍,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

本文介绍了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('调用失败');
  });

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

相关文章

  • Vue+Vant实现下拉加载功能

    Vue+Vant实现下拉加载功能

    为了像微信一样方便地加载更多历史消息,这篇文章将为大家介绍我们如何使用vant组件来实现下拉加载功能,感兴趣的小伙伴可以跟随小编一起了解一下
    2023-06-06
  • vue组件之间通信方式实例总结【8种方式】

    vue组件之间通信方式实例总结【8种方式】

    这篇文章主要介绍了vue组件之间通信方式,结合实例形式总结分析了vue.js的8种组件通信方式与相关操作注意事项,需要的朋友可以参考下
    2019-02-02
  • Vue数字相加、相减精度丢失处理3种方法

    Vue数字相加、相减精度丢失处理3种方法

    这篇文章主要给大家介绍了关于Vue数字相加、相减精度丢失处理3种方法的相关资料,前端在操作加减乘除计算时,经常会出现精度缺失问题,有时会显示为科学计数的样式,需要的朋友可以参考下
    2023-08-08
  • 深入理解vue中的scoped属性

    深入理解vue中的scoped属性

    vue中的 scoped 属性,其实就是给每一个dom节点元素都添加了不重复的自定义属性(如:data-v-6810cbe5),本文给大家介绍vue中的scoped属性相关知识,感兴趣的朋友一起看看吧
    2023-12-12
  • 浅谈vue中关于checkbox数据绑定v-model指令的个人理解

    浅谈vue中关于checkbox数据绑定v-model指令的个人理解

    这篇文章主要介绍了浅谈vue中关于checkbox数据绑定v-model指令的个人理解,v-model用于表单的数据绑定很常见,下面就来详细的介绍一下
    2018-11-11
  • Vue 固定头 固定列 点击表头可排序的表格组件

    Vue 固定头 固定列 点击表头可排序的表格组件

    这篇文章主要介绍了Vue 固定头 固定列 点击表头可排序的表格组件的相关资料,需要的朋友可以参考下
    2016-11-11
  • Vue中如何实现动态路由的示例代码

    Vue中如何实现动态路由的示例代码

    本文主要介绍了Vue中如何实现动态路由的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • vue3 setup访问子组件的 DOM 元素的示例代码

    vue3 setup访问子组件的 DOM 元素的示例代码

    使用setup的情况下这个时候我们无法使用this,注意在setup中setup是封闭的,不会将子组件事件暴露出来,所以要用defineExpose(),这篇文章主要介绍了vue3 setup访问子组件的 DOM 元素,需要的朋友可以参考下
    2023-08-08
  • 基于Vue 实现一个中规中矩loading组件

    基于Vue 实现一个中规中矩loading组件

    这篇文章主要介绍了基于Vue 实现一个中规中矩loading组件,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • HBuilder导入vue项目并通过域名访问的过程详解

    HBuilder导入vue项目并通过域名访问的过程详解

    这篇文章主要介绍了HBuilder导入vue项目并通过域名访问,一般情况下运行vue项目需要安装node.js,通过npm命令来安装vue组件和运行vue项目,本文给大家介绍的非常详细,需要的朋友可以参考下
    2022-05-05

最新评论