如何在 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 repo也创建了一个issue但是关闭了，我没看懂关闭评论

Answer 1

原来需要将 secure 标志指定为 false，如下所示：

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

如何在 Vite 中配置代理？

How to configure proxy in Vite?

http-proxy

vuejs3

vite