关于vue中proxy代理的七种使用场景配置

前言

在Vue中，代理（Proxy）是一种将请求转发到其他服务器的机制。它允许你在开发环境中通过一个中间层来处理网络请求，以解决跨域问题或将请求发送到不同的后端服务器。
通过代理配置，你可以指定特定的URL路径，将其转发到不同的目标服务器。这在开发过程中特别有用，因为你可以将API请求代理到本地服务器或其他开发服务器，而无需直接连接到真实的后端服务器。

Vue的代理配置可以在 vue.config.js 文件中进行设置。你可以使用 devServer 选项来配置代理。

以下就是不同应用场景中 vue.config.js 的配置信息

示例一

使用后端在localhost:3000上，可以使用它来启用代理：

module.exports = {
  devServer: {
    proxy: {
      '/api': 'http://localhost:3000',
    },
  },
};

现在，对/api/users的请求会将请求代理到http://localhost:3000/api/users。

示例二

如果不希望传递/api，则需要重写路径：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

在上面的示例中，我们将以 /api 开头的请求代理到 http://api.example.com 。 changeOrigin 选项用于修改请求头中的 Host 字段，将其设置为目标URL的主机名。 pathRewrite 选项用于重写请求路径，将 /api 去掉。这样，当你在Vue应用中发起以 /api 开头的请求时，它将被代理到 http://api.example.com 。

示例三

默认情况下，将不接受在 HTTPS 上运行且证书无效的后端服务器。 如果需要，可以这样修改配置：

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'https://other-server.example.com',
        secure: false,
      },
    },
  },
};

示例四

有时不想代理所有内容。 可以基于函数的返回值绕过代理。

在该功能中，可以访问请求（req），响应（res）和代理选项（proxyOptions）。

• 返回 null 或 undefined 以继续使用代理处理请求。
• 返回 false 会为请求产生 404 错误。
• 返回提供服务的路径，而不是继续代理请求。

例如。 对于浏览器请求，想要提供 HTML 页面，但是对于 API 请求，想要代理它。 可以执行以下操作：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        bypass: function (req, res, proxyOptions) {
          if (req.headers.accept.indexOf('html') !== -1) {
            console.log('Skipping proxy for browser request.');
            return '/index.html';
          }
        },
      },
    },
  },
};

示例五

如果想将多个特定路径代理到同一目标，则可以使用一个或多个带有context属性的对象的数组：

module.exports = {
  devServer: {
    proxy: [
      {
        context: ['/auth', '/api'],
        target: 'http://localhost:3000',
      },
    ],
  },
};

示例六

默认情况下，代理时会保留主机头的来源，可以将changeOrigin设置为true以覆盖此行为。如果设置成true：发送请求头中host会设置成target。

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      },
    },
  },
};

示例七

当我们使用代理后想要确认现在用的接口是不是我希望代理的服务下的接口，按照老规矩就是直接按下f12进入浏览器的开发者工具，我们会发现Network找的的接口链接的地址还是原来没有代理的地址，难道没有代理成功吗？其实代理已经生效了，只是浏览器这边不会直接给你放出代理后的地址，这是如果还是不放心，可以添加一个logLevel参数，并且设置为debug，这样你在刷新看，就会发现显示的地址就是我们代理后的地址。

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        logLevel: 'debug', // 显示代理后的真实地址
      },
    },
  },
};

参考文章

webpack中文文档