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, 本地就會虛擬一個服務器接收你的請求並代你發送該請求。