Axios CORS issue between VueJS frontend and SailsJS backend

Question

I've thrown the kitchen sink at this problem yet I'm still unable to make an Axios connection from my VueJs frontend to my SailsJS backend. Vue is running on localhost:8080 and Sails is running on localhost:1337 . Here is the error message and some relevant settings -

Vue - vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/': {
        target: 'http://localhost:1337',
        changeOrigin: true,
        pathRewrite: {
          '^/': ''
        }
      }
    }
  }
}

Vue - src/views/Example.vue

axios.defaults.baseURL = 'http://localhost:8080'
  axios.defaults.crossDomain = true
  axios.defaults.headers['Access-Control-Allow-Origin'] = '*'


  const response = await axios.get('http://localhost:1337/hello')

Sails - config/security.js

module.exports.security = {

  cors: {
    allRoutes: true,
    allowOrigins: '*',
    allowCredentials: false,
    methods: 'GET, POST, PUT, DELETE, OPTIONS, HEAD',
    headers: 'content-type',
    allowAnyOriginWithCredentialsUnsafe: true,
  }

};

Sails - api/controllers/ExampleController.js

module.exports = {
  hello: function(req, res) {
    return res.status(200).send('hello');
  }
}

I've tinkered with these settings a good amount based on other SO suggestions but nothing seems to get around this CORS error. Any ideas?

EDIT

I found one solution that works, albeit not ideal. If I add this at the action level it will send a response that my frontend will accept.

Sails - api/controllers/ExampleController.js

module.exports = {
  hello: function(req, res) {
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8080');

    return res.status(200).send('hello');
  }
}

Answer 1

in your sails config/routes.js, try:

'POST /api/v1/your_route': { action: 'your_path_to_action', cors: false, csrf: false },

And why is your axios default, axios.defaults.baseURL = 'http://localhost:8080' set to:8080?