Axios and FW/1 unable to use headers (CORS error)

Question

I am unable to use headers with my axios request

This works

App.vue

axios
    .get(Config.BASEURL + 'pref/footer', { })
    .then(response => (this.footer = response.data))

This does not

App.vue

axios
    .get(Config.BASEURL + 'pref/footer', { crossDomain: true, headers: {"Authorization":1}})
    .then(response => (this.footer = response.data))

My end point looks like this

application.cfc

...
variables.framework.routes  = [
    // Rest
    { "$GET/rest/carousel"                  = "rest/carousel"                       },
    { "$PUT/rest/contactus"                 = "rest/contactus"                      },
    { "$POST/rest/login"                    = "restLogin/loginPOST"                 },
    { "$GET/rest/message"                   = "rest/message"                        },
    { "$GET/rest/page/:id"                  = "rest/page/slug/:id"                  },
    { "$GET/rest/page"                      = "rest/page"                           },
    { "$GET/rest/pref/:id"                  = "rest/pref/slug/:id"                  },
...

I get an error message that looks like this:

In the App.vue, I can't figure out what to add.

Answer 1

The nature of the problem is not on the client side. It is on the Server side. In particular it is in FW/1 which is a part of the ColdFusion. The magic word is preflight response. When Axois does it get request, it actually does an OPTIONS before GET. So what you have to do is convince FW\1 to respond to OPTIONS the long way is the explicitly add OPTIONS to the variables.framework.routes, but there is a much simpler way to do this. Just add the following to the config.

application.cfc

variables.framework =   {
    ...
    preflightOptions = true,
    ...
    };