TIL：在Vite上设置代理服务器-DEV365 开发者社区

所以，今天我学会了如何在Vite上设置代理服务器。我厌倦了看到这种台词的一面：

axios.get('localhost:5001/api/products/1234')

因此，第一种方法是创建一个.env.local并在此设置一个这样的env变量：

VITE_API_BASE_URL="localhost:5001"

这样，我的初始代码看起来像：

const API_BASE_URL = import.meta.env.VITE_API_BASE_URL
axios.get(`${API_BASE_URL}/api/products/1234`)

但是，每次我需要获得api_base_url。

所以我决定设置代理服务器。这不仅对“使URL短”很有用，而且对于克服CORS问题，如果您的API在“ Localhost”以外的其他主机中。

export default defineConfig({
  plugins: ...,
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:5001',
        changeOrigin: true,
        secure: false,
      }
    }
  }
})

从.env加载目标

假设您想根据运行应用程序的环境更改该目标道具。

您可以通过检查命令或模式来完成此操作，但是我建议加载.env文件并使用我们已经定义的vite_api_base_url。

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '');

  return {
    plugins: ...,
    server: {
      proxy: {
        '/api': {
          target: env.VITE_API_BASE_URL,
          changeOrigin: true,
          secure: false,
        },

以这种方式，目标将取决于.env上定义的vite_api_base_url，该目标在生产，分期或本地时应不同。

修复“ HTTP代理错误econnreset”

即使请求是成功的（通过检查网络检查员），终端上的Vite记录了一个错误。

http proxy error ECONNRESET at TLSWrap.onStreamRead

对于每个被代理的请求。

所以发布的答案here可以做到。

您需要首先添加 https 作为DEV依赖性：npm i -D https

然后在vite.config.js的顶部导入：

import http from "https";

，然后在我们刚刚创建的代理密钥/api上添加代理支柱：

server: {
      proxy: {
        '/api': {
          target: env.VITE_API_BASE_URL,
          changeOrigin: true,
          secure: false,
          agent: new http.Agent()
        },

希望这可以帮助某人节省下一个项目的时间。愉快的编码！

可以在此处找到官方文档：vite server proxy options