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


Posted in Javascript onSeptember 08, 2020

在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设置方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript中找到子元素在父元素内相对位置的代码
Jul 21 Javascript
js数组去重的常用方法总结
Jan 24 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
May 14 Javascript
jQuery动画与特效详解
Feb 01 Javascript
jQuery实用技巧必备(下)
Nov 03 Javascript
Knockoutjs 学习系列(一)ko初体验
Jun 07 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
Nov 09 Javascript
JavaScript数据结构之栈实例用法
Jan 18 Javascript
vue实现PC端录音功能的实例代码
Jun 05 Javascript
利用JS代码自动删除稿件的普通弹幕功能
Sep 20 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
Oct 25 Javascript
element tree树形组件回显数据问题解决
Aug 14 Javascript
如何使用jQuery操作Cookies方法解析
Sep 08 #jQuery
js实现右键弹出自定义菜单
Sep 08 #Javascript
vue 使用原生组件上传图片的实例
Sep 08 #Javascript
使用js和canvas实现时钟效果
Sep 08 #Javascript
javascript使用canvas实现饼状图效果
Sep 08 #Javascript
vue配置多代理服务接口地址操作
Sep 08 #Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
Sep 08 #Javascript
You might like
全国FM电台频率大全 - 4 山西省
2020/03/11 无线电
php模板函数 正则实现代码
2012/10/15 PHP
php常用字符串比较函数实例汇总
2014/11/24 PHP
php验证手机号码
2015/11/11 PHP
php使用escapeshellarg时中文被过滤的解决方法
2016/07/10 PHP
PHP简单遍历对象示例
2016/09/28 PHP
PHP中PCRE正则解析代码详解
2019/04/26 PHP
用jscript实现新建和保存一个word文档
2007/06/15 Javascript
javascript mouseover、mouseout停止事件冒泡的解决方案
2009/04/07 Javascript
javascript 显示当前系统时间代码
2009/12/28 Javascript
jQuery select操作控制方法小结
2010/05/26 Javascript
javascript定义函数的方法
2010/12/06 Javascript
基于mootools插件实现遮罩层新手引导
2012/05/24 Javascript
js获取或设置当前窗口url参数的小例子
2013/10/14 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
浅谈重写window对象的方法
2014/12/29 Javascript
表单验证正则表达式实例代码详解
2015/11/09 Javascript
简单对比分析JavaScript中的apply,call与this的使用
2015/12/04 Javascript
js运动应用实例解析
2015/12/28 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
2016/10/10 Javascript
JS获取年月日时分秒的方法分析
2016/11/28 Javascript
Angular.JS中的this指向详解
2017/05/17 Javascript
Angular4实现动态添加删除表单输入框功能
2017/08/11 Javascript
vue解决一个方法同时发送多个请求的问题
2018/09/25 Javascript
js中怎么判断两个字符串相等的实例
2019/01/17 Javascript
js实现鼠标点击页面弹出自定义文字效果
2019/12/24 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
2020/12/14 Vue.js
Python中的字典遍历备忘
2015/01/17 Python
详解python的argpare和click模块小结
2019/03/31 Python
python取均匀不重复的随机数方式
2019/11/27 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
仿酷狗html5手机音乐播放器主要部分代码
2013/05/15 HTML / CSS
Moda Operandi官网:美国奢侈品电商,海淘秀场T台同款
2020/05/26 全球购物
竞选部门副经理的自荐书范文
2014/02/11 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
python geopandas读取、创建shapefile文件的方法
2021/06/29 Python