title: Express: unable to access route from browser due to accept:application/javascript header missing
body: <p>I'm new to express. I have a Vue application running on express. I have some API routes that I'm able to access using axios through the browser. To access those routes using postman I have to have the header: </p>
  
  <pre><code>accept: application/javascript
  </code></pre>
  
  <p>for it to return the result of the actual API. If I don't use this header, I get the generated index.html from webpack. I need to reuse one of these routes to return excel/pdf, based on a parameter and have it accessible via a link on the page.</p>
  
  <p>Here's my server.js - based on <a href="https://github.com/southerncross/vue-express-dev-boilerplate" rel="nofollow noreferrer">https://github.com/southerncross/vue-express-dev-boilerplate</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import express from 'express'
  import path from 'path'
  import favicon from 'serve-favicon'
  import logger from 'morgan'
  import cookieParser from 'cookie-parser'
  import bodyParser from 'body-parser'
  import webpack from 'webpack'
  
  const argon2 = require('argon2');
  const passport = require('passport')
  const LocalStrategy = require ('passport-local')
  const session = require('express-session')
  
  
  import history from 'connect-history-api-fallback'
  
  // Formal(Prod) environment, the following two modules do not need to be introduced
  import webpackDevMiddleware from 'webpack-dev-middleware'
  import webpackHotMiddleware from 'webpack-hot-middleware'
  
  import config from '../../build/webpack.dev.conf'
  
  const app = express()
  app.set('trust proxy', true)
  
  app.set("view engine", "pug")
  app.set('views', path.join(__dirname, 'views'))
  
  app.use ('/', require('./routes'))
  
  
  app.use(session({
   secret: process.env.SESSION_SECRET || 'secretsauce',
   resave: false,
   saveUninitialized: true
  }))
  
  
  app.use(history())
  app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')))
  app.use(logger('dev'))
  app.use(bodyParser.json())
  app.use(bodyParser.urlencoded({
   extended: false
  }))
  app.use(cookieParser())
  app.use(express.static(path.join(__dirname, 'public')))
  
  const compiler = webpack(config)
  
  app.use(webpackDevMiddleware(compiler, {
   publicPath: config.output.publicPath,
   stats: {
    colors: true
   }
  }))
  
  app.use(webpackHotMiddleware(compiler))
  
  
  
  ////////// PASSPORT ///////////////////////
  app.use (passport.initialize ());
  app.use (passport.session ());
  
  async function authenticateUser (username, password) {
  //...
    
  }
  
  passport.use (
   new LocalStrategy (async (username, password, done) =&gt; {
    const user = await authenticateUser (username, password)
    if (!user) {
     return done (null, false, {
      message: 'Username and password combination is wrong',
     });
    }
  
    delete user.password;
    return done (null, user)
   })
  );
  
  // Serialize user in session
  passport.serializeUser ((user, done) =&gt; {
   done (null, user);
  });
  
  passport.deserializeUser (function(user, done) {
   if(user === undefined || !user || Object.keys(user).length === 0)
    return done(null, false)
   else
    done (null, user);
  });
  
  //////////// passport end ///////////////
  
  
  app.set("view engine", "pug")
  app.use(express.static(path.join(__dirname, 'views')))
  app.get('/', function (req, res) {
   res.sendFile('./views/index.html')
  })
  app.get('/success', function (req, res) {
   res.render('./views/success')
  })
  
  
  
  app.use ('/api', require('./api'))
  
  
  // catch 404 and forward to error handler
  app.use(function (req, res, next) {
   var err = new Error('Not Found')
   err.status = 404
   next(err)
  })
  
  app.use(function (err, req, res) {
   res.status(err.status || 500)
   res.send(err.message)
  })
  
  
  
  
  let server = app.listen(80)
  
  export default app</code></pre>
  </div>
  </div>
  </p>
  
  <p>And here's a bit of <strong>api.js</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const {Router} = require ('express')
  const router = Router()
  
  router.get('/whome', function(req, res){
   logger.info('whome', req.user)
   return res.json(req.user)
  })
  
  
  router.get ('/hello', auth.isAuthenticated, async (req, res) =&gt; {
   res.json ({text:'hello'})
  })
  
  module.exports = router</code></pre>
  </div>
  </div>
  </p>
  
  <p>I can call <code>http://localhost/api/hello</code> from postman with the <code>accept:application/javascript</code> header and I get: </p>
  
  <pre><code>{
      "text": "hello"
  }
  </code></pre>
  
  <p>as expected. But if I call the same URL from the browser (and it's not sending that header), I get the created bundle index.html. How can I access these routes from the browser?</p>