proxy配置

Proxy 是一种用于前端开发的常见技术,用于将客户端请求代理到服务器。这在开发过程中很有用,因为它允许前端开发人员绕过同源策略,将请求发送到不同域名的后端服务器。Vue.js 的开发环境中,可以通过配置 vue.config.js 文件来设置代理。

方法 1:配置单个代理

如果您只需要配置一个代理,可以像这样在 vue.config.js 文件中设置:

复制代码
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://example.com', // 将请求代理到的后端服务器地址
        changeOrigin: true, // 启用跨域
        pathRewrite: {
          '^/api': '' // 重写请求路径,将 '/api' 删除
        }
      }
    }
  }
};

所有以 /api 开头的请求都将被代理到 http://example.com,并且路径中的 /api 部分将被删除

方法 2:多个代理配置

如果您需要配置多个代理,可以像这样在 vue.config.js 文件中设置:

复制代码
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      },
      '/another-api': {
        target: 'http://another-example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/another-api': ''
        }
      }
    }
  }
};

这允许您配置多个代理,每个代理针对不同的请求路径。

在配置代理后,您可以在前端代码中发起请求,

复制代码
axios.get('/api/some-endpoint')
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  });

所有以 /api 开头的请求将被代理到 http://example.com,并在前端代码中可以直接使用 /api/some-endpoint 这样的路径进行请求。

相关推荐
小小小小宇2 分钟前
一个功能相对完善的前端 Emoji
前端
m0_627827523 分钟前
vue中 vue.config.js反向代理
前端
Java&Develop4 分钟前
onloyoffice历史版本功能实现,版本恢复功能,编辑器功能实现 springboot+vue2
前端·spring boot·编辑器
白泽talk8 分钟前
2个小时1w字| React & Golang 全栈微服务实战
前端·后端·微服务
摆烂工程师16 分钟前
全网最详细的5分钟快速申请一个国际 “edu教育邮箱” 的保姆级教程!
前端·后端·程序员
HhhDreamof_21 分钟前
云贝餐饮 最新 V3 独立连锁版 全开源 多端源码 VUE 可二开
前端·vue.js·开源
Simaoya25 分钟前
【vue】【element-plus】 el-date-picker使用cell-class-name进行标记,type=year不生效解决方法
前端·javascript·vue.js
Dnn0132 分钟前
vue3+element-push 实现input框粘贴图片或文本,图片上传。
前端·javascript·vue.js
Nuyoah.44 分钟前
《Vue3学习手记5》
前端·javascript·学习
九酒1 小时前
性能优化:500w字符编码需要多少时间?
前端·性能优化