javascript - 在 vite 中添加代理会把我带到本地主机上的那个代理 URL。我只想用它进行后台的 API 调用

这是我的 vite.config.ts：

import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'
import { quasar, transformAssetUrls } from '@quasar/vite-plugin'

const path = require('path');

// https://vitejs.dev/config/
export default defineConfig({
  test: {
    globals: true
  },
  plugins: [
    vue({
      template: {
        transformAssetUrls
      }
    }),
    quasar({
      sassVariables: 'src/assets/scss/quasar-variables.sass'
    })
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, './src'),
    },
  },
  server: {
    proxy: {
      '/socket': {
        target: 'wss://abc-website.com:4221/',
        changeOrigin: true,
        ws: true,
        rewrite: (path) => path.replace('^/socket', ''),
      },
      '/streaming/': {
        target: 'https://abc-website.com/',
        changeOrigin: true,
      },
      '/': {
        target: 'https://abc-website.com/',
        changeOrigin: true,
        secure: false,
        ws: true
      },
    }
  }
})

每当我的应用程序加载时，它会将我带到 https://abc-website.com，而我正在使用本地主机端口。

我只想将上述网址用于后端 API 调用，比如 https://abc-webite.com/api/auth。

另外，在 vite.config.ts 中设置了代理后，我将 baseURL 设置为 "api/"。

另外，在稍微修改之后，它会调用像 https://localhost:3000/auth 这样的 REST API，实际上应该是 https://localhost:3000/api/auth

Vite 代理对我来说似乎无法正常工作。

答案＃1

我认为你可以这样做:

server: {
  proxy: {
    // ... your other proxies
    '/api': {
      target: 'https://abc-website.com/',
      changeOrigin: true,
      secure: false,
      ws: true,
      rewrite: (path) => path.replace(/^\/app/, ''),
    },
  }
}

然后，所有你向像 localhost:3000/api/my-endpoint 这样的站点发出的请求都应该被代理到 https://abc-website.com/my-endpoint。你不能代理所有“基本”请求，因为它们是保留给提供其他所有内容、所有资源、index.html 等使用的，但我也很友善