Nodejs VUE dev proxytab 如何代理有参数的 GET 请求

发布于 1周前 作者 ionicwang 来自 nodejs/Nestjs

Nodejs VUE dev proxytab 如何代理有参数的 GET 请求

我用 GET 方法去传递参数给后端, 但是用ProxyTable匹配不到参数，例如：/api/profile/{user_name} 或者/api/profile/search?q=andy , axios 请求的时候会报错 404 错误

Harmonyos Next教程
2 回复

你配置贴出来看看呢
理论上是这样式的: http://www.v2ex.com/api/profile ===> http://localhost:端口 /api/profile 不管你屁股后面跟着什么东西


在Node.js中使用Vue开发时，如果需要通过devServer的proxyTable来代理带有参数的GET请求，可以通过配置webpack-dev-server的proxy选项来实现。以下是一个示例配置，展示如何代理带有参数的GET请求。

首先，确保你已经安装了webpack-dev-server和相关依赖。然后，在你的Vue项目的vue.config.js文件中，可以这样配置：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://example.com', // 目标服务器地址
        changeOrigin: true,
        pathRewrite: { '^/api': '' },
        onProxyReq: (proxyReq, req, res) => {
          // 如果需要，可以在这里修改请求参数
          // 例如，添加自定义头信息
          proxyReq.setHeader('X-Special-Proxy-Header', 'foobar');
        },
      },
    },
  },
};

在上述配置中，/api路径下的请求都会被代理到http://example.com。changeOrigin: true表示会修改请求的origin头信息为目标URL。pathRewrite用于重写URL路径。

假设你在Vue组件中发起一个带有参数的GET请求：

axios.get('/api/some-endpoint?param1=value1&param2=value2')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

这个请求会被代理到http://example.com/some-endpoint?param1=value1&param2=value2。

这样，你就可以通过devServer的proxyTable来代理带有参数的GET请求了。

回到顶部