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 相关文章推荐
jquery实现的可隐藏重现的靠边悬浮层实例代码
May 27 Javascript
验证控件与Button的OnClientClick事件详细解析
Dec 04 Javascript
深入理解JavaScript中的传值与传引用
Dec 09 Javascript
jQuery不兼容input的change事件问题解决过程
Dec 05 Javascript
javascript封装的sqlite操作类实例
Jul 17 Javascript
JavaScript实现模仿桌面窗口的方法
Jul 18 Javascript
JavaScript判断DIV内容是否为空的方法
Jan 29 Javascript
AngularJS directive返回对象属性详解
Mar 28 Javascript
JS控制伪元素的方法汇总
Apr 06 Javascript
Javascript数组循环遍历之forEach详解
Nov 07 Javascript
JS动态生成年份和月份实例代码
Feb 04 Javascript
vuex刷新后数据丢失的解决方法
Oct 18 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数组操作汇总 php数组的使用技巧
2011/07/17 PHP
取得单条网站评论以数组形式进行输出
2014/07/28 PHP
Laravel 5.4重新登录实现跳转到登录前页面的原理和方法
2017/07/13 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
Laravel学习笔记之Artisan命令生成自定义模板的方法
2018/11/22 PHP
javascript event 事件解析
2011/01/31 Javascript
为开发者准备的10款最好的jQuery日历插件
2014/02/04 Javascript
node.js正则表达式获取网页中所有链接的代码实例
2014/06/03 Javascript
jQuery中change事件用法实例
2014/12/26 Javascript
JavaScript控制table某列不显示的方法
2015/03/16 Javascript
JavaScript的Vue.js库入门学习教程
2016/05/23 Javascript
jQuery中的each()详细介绍(推荐)
2016/05/25 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
详解vue-cli + webpack 多页面实例应用
2017/04/25 Javascript
Vue 中如何正确引入第三方模块的方法步骤
2019/05/05 Javascript
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
2019/11/12 Javascript
详解微信小程序中var、let、const用法与区别
2020/01/11 Javascript
微信小程序实现分页加载效果
2020/11/19 Javascript
VUE实现吸底按钮
2021/03/04 Vue.js
[03:48]2014DOTA2 TI专访71DK夺冠不靠小组赛高排名
2014/07/11 DOTA
python中getattr函数使用方法 getattr实现工厂模式
2014/01/20 Python
python解析xml文件实例分析
2015/05/27 Python
Python的消息队列包SnakeMQ使用初探
2016/06/29 Python
python sys,os,time模块的使用(包括时间格式的各种转换)
2018/04/27 Python
Python实现的爬虫刷回复功能示例
2018/06/07 Python
Python cv2 图像自适应灰度直方图均衡化处理方法
2018/12/07 Python
Pycharm 2020最新永久激活码(附最新激活码和插件)
2020/09/17 Python
Django中的模型类设计及展示示例详解
2020/05/29 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
中东奢侈品市场:Coveti
2019/05/12 全球购物
大学生最新职业生涯规划书范文
2014/01/12 职场文书
公务员综合考察材料
2014/02/01 职场文书
世界各国短波电台对东亚播送时间频率表(SW)
2021/06/28 无线电
HTML基础详解(下)
2021/10/16 HTML / CSS
MySQL中IO问题的深入分析与优化
2022/04/02 MySQL