Vue项目配置跨域访问和代理proxy设置方式

 更新时间:2020年09月08日 16:03:08   作者:GuoyeZhang  
这篇文章主要介绍了Vue项目配置跨域访问和代理proxy设置方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

在vue单页应用项目开发时,避免不了要请求后端,这时通常就会出现跨域问题。有2种常用的解决方案

后端设置允许跨域访问

前端通过代理进行访问后端

下面我们只说说如何配置vue-cli代理访问:

vue-cli代理

最简单就是配置vue conifg进行实现

下面配置3个请求的后端,分别是:

请求http://localhost:4201/adminapi/*会代理请求http://localhost:8180/*

请求http://localhost:4201/portalapi/*会代理请求http://localhost:8185/*

请求http://localhost:4201/securityapi/*会代理请求http://localhost:8089/*

由于vue-cli是基于webpack,因此webpack的devServer选项都是支持配置的

module.exports = {
 // ...
 devServer: {
   port: 4201,
   proxy: {
    '/adminapi': {
     target: 'http://localhost:8180',
     ws: true,
     changeOrigin: true,
     pathRewrite: {
      '^/adminapi': ''
     }
    },
    '/portalapi/': {
     target: 'http://localhost:8185/',
     ws: true,
     changeOrigin: true,
     pathRewrite: {
      '^/portalapi': ''
     }
    },
    '/securityapi/': {
     target: 'http://localhost:8089/',
     ws: true,
     changeOrigin: true,
     pathRewrite: {
      '^/securityapi': ''
     }
    }
   },
   disableHostCheck: true, // 这是由于新版的webpack-dev-server出于安全考虑,默认检查hostname,如果hostname 不是配置内的,将中断访问。
 },
 //...
}

Nodejs做中间时行路由转发

可以用nodejs和框架express对请求做路由转发。

在生产环境下更可以免去使用nginx配置反向代理。

方案各有利弊,技术架构选型时需要针对自己的项目环境,并且适合自己的团队是最好的。

后端跨域访问

后端的跨域访问设置也是比较简单的,不同语言JAVA PHP Python Go的设置也大同小异。

查询一下都有比较多的资料,但在生产环境下,为了安全起见,还是建议不要设置允许跨域访问,或者限制允许跨域的IP

补充知识:Vue 过滤器filter调用data、methods中的东西报错

今天学习了filter,我将过滤的过滤方法放到methods中发现怎么调用都说没有这个function

然后我把log了一下这个this 发现这个this指向的竟然是window

于是网上找到了如下的解决方法:

定义一个全局变量:

let that;

在beforeCreate生命周期将this赋值给that,通过that获得

var vm = new Vue({
  el: '#app',
  data: {
  },
  beforeCreate: function () {
    that = this
  },
  methods:{
   fom(fmt){
    ...
   }
  },
  ....,
  filters: {
       dateformate: function (val) {
         return that.fom("yyyy-MM-dd")
       }
     }
  })

以上这篇Vue项目配置跨域访问和代理proxy设置方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue路由传参页面刷新参数丢失问题解决方案

    vue路由传参页面刷新参数丢失问题解决方案

    这篇文章主要介绍了vue路由传参页面刷新参数丢失问题解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • vux uploader 图片上传组件的安装使用方法

    vux uploader 图片上传组件的安装使用方法

    这篇文章主要介绍了vux-uploader 图片上传组件的安装及使用方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-05-05
  • vue实现移动端悬浮窗效果

    vue实现移动端悬浮窗效果

    这篇文章主要为大家详细介绍了vue实现移动端悬浮窗效果,vuejs实现div拖拽移动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • Vue数据监听方法watch的使用

    Vue数据监听方法watch的使用

    这篇文章主要介绍了Vue数据监听方法watch的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • vue使用echarts实现动态数据的示例详解

    vue使用echarts实现动态数据的示例详解

    这篇文章主要为大家详细介绍了vue如何使用echarts实现动态数据,文中的示例讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-11-11
  • vue中 render 函数功能与原理分析

    vue中 render 函数功能与原理分析

    这篇文章主要介绍了vue中 render 函数功能与原理,结合实例形式分析了vue中render函数的基本功能、原理及相关操作注意事项,需要的朋友可以参考下
    2023-06-06
  • axios简单实现小程序延时loading指示

    axios简单实现小程序延时loading指示

    这篇文章主要介绍了axios简单实现小程序延时loading指示,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • vue Element左侧无限级菜单实现

    vue Element左侧无限级菜单实现

    这篇文章主要介绍了vue Element左侧无限级菜单实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • 深入了解Vue动态组件和异步组件

    深入了解Vue动态组件和异步组件

    这篇文章主要介绍了深入了解Vue动态组件和异步组件的相关资料,帮助大家更好的理解和学习vue组件的相关知识,感兴趣的朋友可以了解下
    2021-01-01
  • Vue中的Tree-Shaking介绍及原理

    Vue中的Tree-Shaking介绍及原理

    这篇文章主要介绍了Vue中的Tree-Shaking是什么,通过Tree-shaking,将没有使用的模块代码移除掉,这样来达到删除无用代码的目,本文结合实例代码详解详解,需要的朋友可以参考下
    2023-04-04

最新评论