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 相关文章推荐
图片翻转效果具体实现代码
Jan 09 Javascript
js给页面加style无效果的解决方法
Jan 20 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
Jun 16 Javascript
js实现基于正则表达式的轻量提示插件
Aug 29 Javascript
学习javascript文件加载优化
Feb 19 Javascript
超实用的JavaScript代码段 附使用方法
May 22 Javascript
JS对大量数据进行多重过滤的方法
Nov 04 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
Nov 07 Javascript
详解Vue.js中.native修饰符
Apr 24 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
Jan 21 Javascript
通过图带你深入了解vue的响应式原理
Jun 21 Javascript
JS实现滑动插件
Jan 15 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
bindParam和bindValue的区别以及在Yii2中的使用详解
2018/03/12 PHP
BOOM vs RR BO5 第三场 2.14
2021/03/10 DOTA
javascript Demo模态窗口
2009/12/06 Javascript
Prototype源码浅析 String部分(二)
2012/01/16 Javascript
简单介绍JavaScript的变量和数据类型
2015/06/03 Javascript
JavaScript严格模式详解
2015/11/18 Javascript
利用JQuery写一个简单的异步分页插件
2016/03/07 Javascript
浅谈jQuery中的checkbox问题
2016/08/10 Javascript
Angular4自制一个市县二级联动组件示例
2017/11/21 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
2018/05/15 Javascript
JavaScript高级函数应用之分时函数实例分析
2018/08/03 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
基于layui的下拉列表的数据回显方法
2019/09/24 Javascript
vue页面切换项目实现转场动画的方法
2019/11/12 Javascript
jQuery实现简单飞机大战
2020/07/05 jQuery
如何使用 vue-cli 创建模板项目
2020/11/19 Vue.js
js实现圆形菜单选择器
2020/12/03 Javascript
Python内置的字符串处理函数详细整理(覆盖日常所用)
2014/08/19 Python
python文件的md5加密方法
2016/04/06 Python
python解决方案:WindowsError: [Error 2]
2016/08/28 Python
numpy.ndarray 交换多维数组(矩阵)的行/列方法
2018/08/02 Python
CentOS 7 安装python3.7.1的方法及注意事项
2018/11/01 Python
python2.7实现邮件发送功能
2018/12/12 Python
python 执行文件时额外参数获取的实例
2018/12/18 Python
python selenium 弹出框处理的实现
2019/02/26 Python
Django框架下静态模板的继承操作示例
2019/11/08 Python
pycharm的python_stubs问题
2020/04/08 Python
pytorch 把图片数据转化成tensor的操作
2021/03/04 Python
中国电子产品批发商/跨境电商/外贸网:Sunsky-online
2020/04/20 全球购物
客户表扬信范文
2014/01/10 职场文书
计划生育标语
2014/06/23 职场文书
艺术设计专业毕业生推荐信
2014/07/08 职场文书
机电系毕业生求职信
2014/07/11 职场文书
戒赌保证书
2015/05/11 职场文书
2016年企业先进员工事迹材料
2016/02/25 职场文书
Java 超详细讲解设计模式之中的抽象工厂模式
2022/03/25 Java/Android