Question

我有一个全栈应用程序，以Create-React-App和Express.js为后端。

开发设置（在端口3000上运行的CRA）是由CRA的代理实现的，因此我可以将某些路由直接转发到后端（在端口5000上运行）：

"proxy": {
    "/auth/*": {
      "target": "http://localhost:5000"
    },
    "/api/*": {
      "target": "http://localhost:5000"
    }
}

要注销用户，我有一条相应的路由：

app.get('/api/logout', (req, res) => {
    req.logout();
    res.redirect('/');
});

还有一个指向该路线的注销按钮：

<a key="logout" href="/api/logout">Logout</a>

在开发模式下 ，运行：3000和：5000，一切正常。单击该按钮可在浏览器中设置URL，该URL将调用路由，代理转发，后端正确识别并处理请求=>会话被杀死！

在生产模式下 （托管在Heroku上），根本找不到并没有触发路线。服务器可能会由于以下配置而在“网络”标签中提供静态html文件：

if (process.env.NODE_ENV === 'production') {

    app.use(express.static('client/build'));

    const path = require('path');
    app.get('*', (req, res) => {
        res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
    });
}

如果我以编程方式注销用户，则通过调用相同的路由onClick，它会起作用：

await axios.get('/api/logout');

但是为什么<a>的浏览器简单重定向在生产环境中不起作用？

THX！

Answer 1

更改

if (process.env.NODE_ENV === 'production') {

app.use(express.static('client/build'));

const path = require('path');
app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
});
}

对此：

let root = path.join(__dirname, 'client', 'build');
app.use(express.static(root));
app.use(function(req, res, next) {
if (req.method === 'GET' && req.accepts('html') && !req.is('json') && 
  !req.path.includes('.')) {
     res.sendFile('index.html', { root });
  } else next();
});

也许有帮助：Configure production environment in a create-react-app

生产中的Create-React-App：找不到路线

1 个答案: