1

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.

1
  • Comments are not for extended discussion; this conversation has been moved to chat. Commented Nov 25, 2020 at 0:59

1 Answer 1

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

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.