webpack-dev-server代理不起作用

Question

我想代理/ v1/*到http://myserver.com,这是我的脚本

 devServer: {
   historyApiFallBack: true,
   // progress: true,
   hot: true,
   inline: true,
   // https: true,
   port: 8081,
   contentBase: path.resolve(__dirname, 'public'),
   proxy: {
     '/v1/*': {
       target: 'http://api.in.uprintf.com',
       secure: false
         // changeOrigin: true
     }
   }
 },

但它不起作用,

Answer 1

更新: 感谢@chimurai,设置changeOrigin: true对于使其有效非常重要.

下面 webpack-dev-server通过了所有代理的配置http-proxy-middleware,从文档.很明显,您想要的用例实际上是通过/v1/**路径实现的:

devServer: {
   historyApiFallBack: true,
   // progress: true,
   hot: true,
   inline: true,
   // https: true,
   port: 8081,
   contentBase: path.resolve(__dirname, 'public'),
   proxy: {
     '/v1/**': {
       target: 'http://api.in.uprintf.com',
       secure: false,
       changeOrigin: true
     }
   }
 },

Answer 2

确保您的请求 url 和端口与您的 webpack-dev-server 运行的匹配。因此，如果您的 api 位于http://localhost:5000，并且您的开发服务器正在 上运行http://localhost:8080，请确保您的所有请求都发送到http://localhost:8080。最好提出您的请求localhost:8080/api（以避免与应用程序路由冲突）并使用路径重写来删除 /api。

例子：

Webpack 开发服务器代理配置：

proxy: {
    '/api': {
        target: 'http://localhost:5000',
        pathRewrite: { '^/api': '' },
    },
}

Webpack 开发服务器运行在：

http://localhost:8080

所需的 API 端点：

http://localhost:5000/items

在您的应用中，向以下请求发出请求：

http://localhost:8080/api/items.

这应该有效。在我看来，上述所有问题都源于向 API url 和端口而不是 webpack 开发服务器 url 和端口发出请求，并使用代理和路径重写将请求定向到 API。