[Coldbox 5.3.x ] Vuejs, Coldbox and CORS. How to get these things playing together succesfully?

[Jason Morris]

We are developing an API with Coldbox. and a UI with VueJS.

Having a hell of a time and going round and round in circles trying to get through CORS.

If we point the same call to a Node API, no issue, but when we point it to our Coldbox API, we are just going around in circles with the Preflight tests and other CORS related issues. Pulling our hair out.

In the end we came across this plugin and installed (https://www.forgebox.io/view/cors), but now getting the below response on a post request:  No Content or error in preview or Response tabs.  Nothing.. just a status code 500 General Application Error.

Has anyone got vueJS/ Axios working with a coldbox application?  Any pointers?

Thanks!!

Here is the VueJS request we are making

<script>
    export default {
        data() {
            return {
                email: '',
                password: '',
                checkbox_remember_me: false
            }
        },
        methods: {
            login () {
                this.$http.post('http://127.0.0.1:9095/auth/user', { email: this.email, password: this.password, remember: this.checkbox_remember_me })
                    .then((response) => {
                        console.log(response.data)
                    })
            }
        }
    }
</script>

[Luis Majano]

I see ou get a 500 when using the `OPTIONS` http verb.  So what happens if you execute that URL path with OPTIONS?

What is the error?

[Gavin Pickin]

I noticed that options was still processing my requests... so in my routes file, i put this action

OPTIONS = 'preFlight',

This means instead of hitting the auth/user action it would hit auth/preFlight and therefore not try and process anything.

I added this to my basehandler so it would call an empty function, and my basehandler responded with the correct cors functionality.

/**

    * A preFlight action for browsers to ensure CORS compatibility

    */

    function preFlight( event, rc, prc ){

    }

The cors module should handle this, but a 500 error might be because you're hitting a function expecting a post, but you're hitting it with an OPTIONS call.

So try using CORS against another URL or try this preflight option, and see if that works.

[Jason Morris]

Thanks Gents!

Gavin, you were spot on.  Reading up on CORS a bit more that is normal browser behaviour (not vueJS itself) that any POST or PUT requests are preceded by a preFlight OPTIONS call.

Because I was just using the default routes and didn't fave specific routes setup yet, the OPTIONS call was going to Auth, but not passing the require params in and throwing an error (as you suggested).  Your suggested approach worked a treat.

A bit messy having to add this to each route, but it works..  I will have a play and see if any way I can set this more globally so only need to set one and update this thread if I find anything, but for now this at least solves the problem.

Thanks!