Vue SSR serverPrefetch server redirect with this.$ssrContext.res.redirect

Question

是否可以在 VUE SSR 中从组件进行重定向，而不会在服务器控制台上出现错误：[ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client？

代码如下：

serverPrefetch() {
    // need the data from this.fetchPage service to decide on the redirect
    return this.fetchPage().then(function (response) {
        // do some checks here

        // THIS IS THE NODE EXPRESS REDIRECT
        this.$ssrContext.res.redirect('/');
        this.$ssrContext.res.end(); // with or without, same error
    }.bind(this));
},
beforeMount() {
    this.fetchPage();
}

注意：如果我尝试使用 this.$router.replace('/')（或任何其他方法），我会收到错误消息：[Vue warn]: Error in callback for watcher $route: ReferenceError: document is not defined.

在我的项目中，我在客户端进行了重定向，但我想知道是否也可以从服务器端进行重定向。

Answer 1

长话短说：

Reject the serverPrefetch with {url: '/redirect-route'}

找到解决方案如下：如果您将 vue-ssr 项目实现为 https://github.com/vuejs/vue-hackernews-2.0 存储库，在 server/index.js 中您有一个 handleError 函数，其中有一个重定向：

if (err.url) {
        res.redirect(err.url);
    }

您需要在组件中做的是：

serverPrefetch() {
    return this.fetchPage().then(res => {
        if(res === 'MY_REDIRECT_CONDITION') {
            // !!! THE ACTUAL REDIRECT TRIGGER !!!
            return Promise.reject({url: '/'});
        }

    });
},

Vue SSR serverPrefetch server redirect with this.$ssrContext.res.redirect

Vue SSR serverPrefetch server redirect with this.$ssrContext.res.redirect

node.js

vue.js

vue-router

vue-component

vue-ssr