vue-cli 中的devServer配置代理

场景一：

devServer: {
    proxy: {
        '/api': 'http://localhost:3000'
    }
}

请求到 /api/xxx 现在会被代理到请求 http://localhost:3000/api/xxx,

例如 /api/user 现在会被代理到请求 http://localhost:3000/api/user

场景二：

多个路径代理到同一个target下, 你可以使用由一个或多个「具有 context 属性的对象」构成的数组：

devServer: {
    proxy: [{
        context: ['/auth', '/api'],
        target: 'http://localhost:3000',
    }]
}

 

场景三：

不始终传递 /api ，则需要重写路径：

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

请求到 /api/xxx 现在会被代理到请求 http://localhost:3000/xxx,

例如 /api/detail 现在会被代理到请求 http://localhost:3000/detail

 

场景四：

默认情况下，不接受运行在 HTTPS 上，且使用了无效证书的后端服务器。

如果你想要接受，只要设置 secure: false 就行。修改配置如下：

devServer: {
    proxy: {
        '/api': {
            target: 'https://other-server.example.com',
            secure: false,
            changeOrigin: true
        }
    }
}

changeOrigin 是一个布尔值, 设置为true, 本地就会虚拟一个服务器接收你的请求并代你发送该请求。