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动态方法调用与参数修改的问题
Dec 10 Javascript
jQuery+jRange实现滑动选取数值范围特效
Mar 14 Javascript
JS实用的动画弹出层效果实例
May 05 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
Sep 14 Javascript
原生js实现图片层叠轮播切换效果
Feb 02 Javascript
JS动态生成年份和月份实例代码
Feb 04 Javascript
用file标签实现多图文件上传预览
Feb 14 Javascript
详解JS异步加载的三种方式
Mar 07 Javascript
JavaScript简单计算人的年龄示例
Apr 15 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
Aug 05 Javascript
vue实现重置表单信息为空的方法
Sep 29 Javascript
vue-router传递参数的几种方式实例详解
Nov 13 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连接MySQL查询结果中文显示乱码解决方法
2013/10/25 PHP
PHP实现无限极分类图文教程
2014/11/25 PHP
PHP实现字符串大小写转函数的功能实例
2019/02/06 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
php命令行模式代码实例详解
2021/02/26 PHP
在你的网页中嵌入外部网页的方法
2007/04/02 Javascript
基于jquery的给文章加入关键字链接
2010/10/26 Javascript
javascript权威指南 学习笔记之javascript数据类型
2011/09/24 Javascript
jquery 无限级联菜单案例分享
2013/03/26 Javascript
jquery获取css中的选择器(实例讲解)
2013/12/02 Javascript
浅谈javascript中字符串String与数组Array
2014/12/31 Javascript
Javascript 闭包详解及实例代码
2016/11/30 Javascript
js多个物体运动功能实例分析
2016/12/20 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
2018/06/25 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
js实现移动端轮播图
2020/12/21 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
2019/02/11 Javascript
layui 弹出层回调获取弹出层数据的例子
2019/09/02 Javascript
jQuery实现移动端扭蛋机抽奖
2020/11/08 jQuery
[03:32]2014DOTA2西雅图邀请赛 CIS外卡赛赛前black专访
2014/07/09 DOTA
c++生成dll使用python调用dll的方法
2014/01/20 Python
python常用函数详解
2016/09/13 Python
详解python里使用正则表达式的分组命名方式
2017/10/24 Python
python生成随机图形验证码详解
2017/11/08 Python
Python-OpenCV基本操作方法详解
2018/04/02 Python
python模块hashlib(加密服务)知识点讲解
2019/11/25 Python
Pytest框架之fixture的详细使用教程
2020/04/07 Python
django 数据库 get_or_create函数返回值是tuple的问题
2020/05/15 Python
解决python图像处理图像赋值后变为白色的问题
2020/06/04 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
初级软件工程师面试题 Junior Software Engineer Interview
2015/02/15 面试题
2015年五一劳动节活动总结
2015/02/09 职场文书
Nginx tp3.2.3 404问题解决方案
2021/03/31 Servers
nginx限制并发连接请求数的方法
2021/04/01 Servers