重新加载时无法获取错误404?

时间:2017-09-26 00:56:12

标签: javascript express webpack

我的反应路由器与dev env工作正常,这是我在webpack dev服务器中所做的:

historyApiFallback: {  
  index: 'index.html',
}

所以在制作模式中我想做同样的事情,我是这样表达的:

const indexPath = path.join(__dirname, '../public/index.html')
const publicPath = express.static(path.join(__dirname, '../public'))

  app.use('/public', publicPath)
  app.use('/graphql', graphQLHTTP(async (req) => {
    let { user } = await getUser(req.headers.authorization); 
    if(!user) {
      user = 'guest'
    }
    return { 
      schema, 
      pretty: true,
      graphiql: true,
      context: {
        user,
      }
    }
  })); 

app.get('/', function (_, res) { res.sendFile(indexPath) });

我没有用react-router-dom改变任何东西,所以我假设错误在我的快速配置中。那么生产模式中的historyApiFallback相当于什么?下面是我的webpack包配置:

output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js',
    publicPath: '/public/'
  },

在我的html中我像这样引用了这个包:

<script type="text/javascript" src="/public/bundle.js"></script>

我认为有一个正确的配置,但是当我重新加载时,我得到GET错误404?

1 个答案:

答案 0 :(得分:1)

您应该将此行添加到您的应用中:

app.get('*', function (_, res) { res.sendFile(indexPath) });

或者你应该更好地使用这个包:https://github.com/bripkens/connect-history-api-fallback

您应该阅读有关history模式的更多信息:

为了摆脱哈希,我们可以使用路由器的历史模式,该模式利用history.pushState API实现URL导航而无需重新加载页面:

使用历史记录模式时,网址会看起来正常,&#34;例如http://oursite.com/user/id。美丽!

但是出现了一个问题:由于我们的应用是单页客户端应用,如果没有正确的服务器配置,如果用户直接在浏览器中访问http://oursite.com/user/id,则会收到404错误。现在那很难看。

不用担心:要解决此问题,您需要做的就是向服务器添加一个简单的全部回退路由。如果网址与任何静态资源不匹配,则该网址应该与您的应用所在的index.html页面相同。再次美丽!