CODEWITHSUNDEEP
node.jsexpressvue.js
temp
temp

Reputation: 571

cors request failed on vue/express

I'm running a vue app on an apache server on a virtual server. Express is started with nodemon. When trying to login I'm getting a

Cannot read property 'status' of undefined xhr.js:160 
POST https://143.93.46.35:60702/user/login net::ERR_TIMED_OUT

on chrome and

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)

on firefox.

In vue my axios baseURL looks like (node is running on port 60702):

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

export default{
    loginUser (user) {
        return apiClient.post(`/user/login`, user)
    },
    ...
}

And the user route on express is:

router.post('/login', async (req, res) => {
  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);
});

In app.js cors is enabled like:

app.use(cors());

Upvotes: 2

Views: 367

Answers (1)

Mike Gerard
Mike Gerard

Reputation: 169

You need to res.setHeader('Access-Control-Allow-Origin', YourOrigin); in a middlewar before app.use(cors()); in order to allow the client.

EDIT :

You can do something like this :

router.use(function (req, res, next) {
let origin = req.headers.origin;
if (allowedOriginsTab.includes(origin)) {
    res.setHeader('Access-Control-Allow-Origin', origin);
}
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();

});

Upvotes: 1

Related Questions