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 表格排序和表头浮动效果(扩展SortTable)
Apr 07 Javascript
Javascript attachEvent传递参数的办法
Dec 14 Javascript
自动设置iframe大小的jQuery代码
Sep 11 Javascript
Js表格万条数据瞬间加载实现代码
Feb 20 Javascript
基于jquery编写的放大镜插件
Mar 23 Javascript
jquery简单插件制作(fn.extend)完整实例
May 24 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
Jul 10 Javascript
JavaScript如何获取到导航条中HTTP信息
Oct 10 Javascript
使用百度地图实现地图网格的示例
Feb 06 Javascript
深入理解移动前端开发之viewport
Oct 19 Javascript
对layui数据表格动态cols(字段)动态变化详解
Oct 25 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
Jul 19 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
php下将XML转换为数组
2010/01/01 PHP
一个PHP缓存类代码(附详细说明)
2011/06/09 PHP
PHP伪静态Rewrite设置之APACHE篇
2014/07/30 PHP
PHP封装cURL工具类与应用示例
2019/07/01 PHP
JavaScript Cookie 直接浏览网站分网址
2009/12/08 Javascript
JS跨域代码片段
2012/08/30 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
2013/05/27 Javascript
详谈JS中实现种子随机数及作用
2016/07/19 Javascript
JavaScript使用键盘输入控制实现数字验证功能
2016/08/19 Javascript
轻松掌握JavaScript中介者模式
2016/08/26 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
详解基于webpack2.x的vue2.x的多页面站点
2017/08/21 Javascript
深入理解Vue官方文档梳理之全局API
2017/11/22 Javascript
vue实现element-ui对话框可拖拽功能
2018/08/17 Javascript
javascript实现文本框标签验证的实例代码
2018/10/14 Javascript
全面分析JavaScript 继承
2019/05/30 Javascript
原生javascript自定义input[type=radio]效果示例
2019/08/27 Javascript
JavaScript享元模式原理与用法实例详解
2020/03/09 Javascript
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
python实现自动登录
2018/09/17 Python
python设置随机种子实例讲解
2019/09/12 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
Python图像处理之膨胀与腐蚀的操作
2021/02/07 Python
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
2016/08/25 HTML / CSS
Parfumdreams芬兰:购买香水和化妆品
2021/02/13 全球购物
Farfetch澳大利亚官网:Farfetch Australia
2020/04/26 全球购物
Solaris操作系统的线程机制
2012/12/23 面试题
优秀员工表扬信
2014/01/17 职场文书
小学体育教学反思
2014/01/31 职场文书
《一本男孩子必读的书》教学反思
2014/02/19 职场文书
受伤赔偿协议书
2014/09/24 职场文书
迎新生标语大全
2014/10/06 职场文书
追讨欠款律师函
2015/05/27 职场文书
《神奇的鸟岛》教学反思
2016/02/22 职场文书
python本地文件服务器实例教程
2021/05/02 Python