Getting a cors error running vue with express

Question

I'm running my Vue App on my express server (nodejs running on port 60702) like:

'use strict';
const fs = require('fs');
const path = require('path');
const express = require('express');
var https = require('https');
const morgan = require('morgan');
const cors = require('cors');
const bodyParser = require('body-parser');
const nconf = require('./config');
const pkg = require('./package.json');
const swaggerSpec = require('./swagger');
const swaggerUI = require('swagger-ui-express');

const app = express();

app.options('*', cors()) // include before other routes

// create a write stream (in append mode)
var accessLogStream = fs.createWriteStream(path.join(__dirname, 'access.log'), {
  flags: 'a'
});

// setup the logger
app.use(morgan('combined', {
  stream: accessLogStream
}));

// Enable CORS (cross origin resource sharing)
app.use(cors());

// Set up body parser
app.use(bodyParser.urlencoded({
  extended: false
}));

app.use(bodyParser.json());

// Load the Vue App
app.use(express.static(path.join(__dirname, '../../client/pvapp-client/dist')));

app.get('/api/version', (req, res) => res.status(200).send(pkg.version));

const userRouter = require('./routes/user');
const systemRouter = require('./routes/system');
const yieldRouter = require('./routes/yield');
const adjustmentRouter = require('./routes/adjustmentfactors');

app.use('/user', userRouter);
app.use('/system', systemRouter);
app.use('/yield', yieldRouter);
app.use('/adjustmentfactors', adjustmentRouter);

//Default route
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, '../../client/pvapp-client/dist/index.html'));
});

//const listener = app.listen(nconf.get('port'), () => console.log(`Ready on port ${listener.address().port}.`));
https.createServer({
    key: fs.readFileSync('certs/apache-selfsigned.key'),
    cert: fs.readFileSync('certs/apache-selfsigned.crt')
  }, app)
  .listen(nconf.get('port'), function() {
    console.log(`App listening on port ${nconf.get('port')}! Go to https://192.168.51.47:${nconf.get('port')}/`)
  });

The User router is:

router.post('/login', async (req, res) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header("Access-Control-Allow-Methods', 'GET,POST");

  let compareUser = await db.query('SELECT * FROM app_users WHERE username=? LIMIT 1', [req.body.username]); // use db.query() to retrieve the password
  if (compareUser.length < 1) // compareUser is an array with at most one item
    res.sendStatus(403);
  let valid = bcrypt.compareSync(req.body.password, compareUser[0].password);
  if (!valid)
    res.sendStatus(403);

  let user = new User(compareUser[0]);
  const token = jwt.sign({
    user
  }, nconf.get('jwtToken'), {
    expiresIn: '14d'
  });
  Object.assign(user, {
    token
  });
  res.json(user);
});

The vue config is:

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production' ? '/vue' : '/',
  devServer: {
    port: 60702,
    https: true,
    disableHostCheck: true
  }
};

Axios:

const apiClient = axios.create({
  baseURL: `https://192.168.51.47:60702`,
  withCredentials: false, // This is the default
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json'
  }
})

export default {
  // user Endpoints
  getUser(email) {
    return apiClient.get(`/user/${email}`)
  },
  registerUser(user) {
    return apiClient.post(`/user/register`, user)
  },
  loginUser(user) {
    return apiClient.post(`/user/login`, user)
  },

But even if I included cors I'm getting:

Cross-source (cross-origin) request blocked: The same source rule prohibits reading the external resource on https://143.93.46.35:60702/user/login. (Reason: CORS request failed).

The axios call in vue also has the correct baseUrl with the port.

I checked the POST request to the backend at /user/login with Postman and get the exprected correct request, too.

Answer 1

It was solved by re-creating the dist folder with

npm run build

Thanks to @Dan for his help

Don't use apiClient. Do a get with the full url, rebuild your app, delete old dist folder, CTRL+F5 refresh once loaded. In fact, put a "?" on the end of the url and make sure you see it in Chrome headers