如何在Vite中配置代理？

Question

我试图遵循文档并创建vite.config.js如下：

const config = {
  outDir: '../wwwroot/',
  proxy: {
    // string shorthand
    '/foo': 'http://localhost:4567',
    // with options
    '/api': {
      target: 'http://jsonplaceholder.typicode.com',
      changeOrigin: true,
      rewrite: path => path.replace(/^\/api/, '')
    }
  }
};

export default config;

并尝试通过以下调用对其进行测试：

fetch('/foo');
fetch('/api/test/get');

我本来期望有实际的请求，http://localhost:4567/foo但http://jsonplaceholder.typicode.com/test/get 它们都以我的开发服务器作为源，如下所示：http://localhost:3000/foo和http://localhost:3000/api/test/get

难道是我理解错了？代理应该如何工作？

我还在 Vite 存储库中创建了一个问题，但它已关闭，而且我不明白结束评论。

Answer 1

事实证明，需要将secure标志指定为 false，如下所示：

 proxy: {
      '/api': {
           target: 'https://localhost:44305',
           changeOrigin: true,
           secure: false,      
           ws: true,
       }
  }

相关github问题

Answer 2

基于Vite 配置，server -> proxy您需要通过inside指定它vite.config.js：

export default defineConfig({
  server: {
    proxy: {
      "/api": {
        target: "https://your-remote-domain.com",
        changeOrigin: true,
        secure: false,
      },
    },
  },
  // some other configuration
})

Answer 3

为了进行调试，我强烈建议向 proxy 添加事件侦听器，这样您就可以看到请求如何转换、它们是否到达目标服务器以及返回的内容。

proxy: {
        '/api': {
          target: 'https://localhost:44305',
          changeOrigin: true,
          secure: false,      
          ws: true,
          configure: (proxy, _options) => {
            proxy.on('error', (err, _req, _res) => {
              console.log('proxy error', err);
            });
            proxy.on('proxyReq', (proxyReq, req, _res) => {
              console.log('Sending Request to the Target:', req.method, req.url);
            });
            proxy.on('proxyRes', (proxyRes, req, _res) => {
              console.log('Received Response from the Target:', proxyRes.statusCode, req.url);
            });
          },
        }
      }

proxy将是“http-proxy”的一个实例，请参阅https://github.com/http-party/node-http-proxy#options了解更多信息