当前位置: 首页 > 编程笔记 >

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

顾文昌
2023-03-14
本文向大家介绍Vue项目配置跨域访问和代理proxy设置方式,包括了Vue项目配置跨域访问和代理proxy设置方式的使用技巧和注意事项,需要的朋友参考一下

在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': ''
     }
    },
    '/html" target="_blank">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设置方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍vue(2.x,3.0)配置跨域代理,包括了vue(2.x,3.0)配置跨域代理的使用技巧和注意事项,需要的朋友参考一下 导语:首先,每一个前端开发人员都应该知道同源策略,同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源,所谓同源是指,域名,协议,端口相同。有一个不同时,都将请求不到资源,将无法“跨域”获取资源。 vue3.0 从最新版开始,

  • 本文向大家介绍vue-cli 3.x 配置Axios(proxyTable)跨域代理方法,包括了vue-cli 3.x 配置Axios(proxyTable)跨域代理方法的使用技巧和注意事项,需要的朋友参考一下 vue-cli 3.x 的beta版本,基于iview做的公司的角色权限管理平台。 3.x 版本对整个项目的构建都有很大的改动,没有原先的config文件夹,没有dev.env.js和pr

  • 如图,这是我项目在 vite.config 的 server 配置。 问题1:为什么配置这样一段代码就解决跨域问题了呢? 问题2:服务器和服务器之间的请求有没有跨域这样的存在呢?(我了解到的是跨域是浏览器的限制,是我理解错了吗) (请大家把我当成一个网络小白,但不是特别小白 >.<)

  • 文档:https://www.npmjs.com/package/egg-cors 安装:npm i egg-cors --save 配置插件 // {app_root}/config/plugin.js exports.cors = { enable: true, package: 'egg-cors', }; config/config.default.js 目录下配置 config.

  • 从FastAdmin1.2.0版本开始已经支持跨域配置,如果我们开发的插件有跨域需要,可以快速使用FastAdmin中的跨域配置。 首先直接在我们的基类控制器代码中添加一行check_cors_request();即可实现跨域的检测和响应。例如: /** * 初始化操作 * @access protected */ protected function _initialize() {