vue多代理配置方法

  1. 在config文件夹中找到index.js
  2. index.js dev配置下的proxyTable中添加
proxyTable:{
	'/graphql': {
        target: 'https://172.26.31.80',
        changeOrigin: true,
        // ws: true,
        pathRewrite: {
          '^/graphql': '/graphql'
        },
        secure: false, 
      },
      // http
      '/index': {
        target: 'http://172.26.31.80:22220',
        pathRewrite: {
          '^/index': '/agent'
          // -> 可以使用 /index 等价于 后台接口的/agilescan
        }
      },
    }

按照上面配置然后直接调用接口就可以了~

### Vue项目中的代理配置 在开发环境中,为了方便前端与后端API之间的通信并解决跨域问题,在`vue.config.js`文件中进行代理配置是一种常见做法。对于Vue3而言,这种配置方式同样适用,并且提供了较为灵活的设置方法[^1]。 #### 使用 `devServer.proxy` 具体来说,可以在项目的根目录下创建或编辑名为`vue.config.js`的文件,加入如下所示的内容: ```javascript module.exports = { devServer: { port: 8080, host: 'localhost', open: true, https: false, proxy: { '/api': { // 这里定义了一个前缀为/api的代理路径 target: 'http://example.com', // 设置目标服务器URL changeOrigin: true, // 是否改变源 ws: false, // 是否启用WebSocket支持 pathRewrite: { // 路径重写规则 '^/api': '' } } } } } ``` 上述代码片段展示了如何利用`devServer.proxy`属性来指定一个或多个代理规则。其中的关键参数解释如下: - **target**: 指定要转发的目标地址。 - **changeOrigin**: 当设置为true时,会更改请求头中的origin字段为目标域名,这有助于某些情况下更好地模拟生产环境下的行为。 - **ws**: 如果应用程序依赖于WebSockets,则应将其设为true以便正确处理这类连接。 - **pathRewrite**: 可用于调整发送给远程服务的实际请求路径;上面的例子表示去除所有以`/api`开头的部分后再传递给目标服务器[^4]。 除了本地开发阶段外,当应用部署到线上之后,通常还会借助Nginx这样的web服务器来进行更复杂的流量管理和负载均衡操作。此时也可以通过类似的反向代理机制实现前后端分离架构下的接口调用优化[^3]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值