Issues with ColdBox and CORS

I am using ColdBox as the backend for an app using Vue.js on the front-end.

When I make ajax calls from the Vue app which is running on localhost:3000, the pre-flight fails.

I have the CORS module installed and am using the default config - which I believe should allow access.

What is strange is that the response headers I get seem to indicate I should have access.

image

Does anyone have any suggestions on how to get this working?

This may be nothing but around the time we were having problems with CORS requests, we needed to remove all the allowedmethods="" from our functions if we were using router.cfc.

Hey, Scott…

I haven’t read up on CORS in a while, but don’t you have to allow that wmsadmin.local domain to make cross origin requests to localhost:3000? This is what CORS is for - preventing those requests. Just because there are CORS-related headers in the API response doesn’t mean they are blanket-allowing all requests from all domains.

What makes you think “the default config” should work in your case?

I am making requests to wmsadmin.local from localhost:3000, not the other way around.

I think it should work because the response headers specifically include http://localhost:3000 in the Access-Control-Allow-Origin header.

1 Like

Apologies, I didn’t do a great job of reading your post then. :man_facepalming:

I don’t have “the answer”, here, but I do have more questions and ideas of things to look into:

  1. What exactly does “the pre-flight fails” mean here? What’s the error, the status code, etc?
  2. Have you tried dumping the AJAX response and checking the CORS headers in that context?
  3. What happens if you change the Access-Control-Allow-Origin to "*"?

“Pre-flight fails” means, it does not pass the preflight check…even though it is supposed to based on what I can tell.

There is no AJAX that is returned…because the pre-flight check fails…

I’ve tried setting Access-Control-Allow-Origin to * in the server config for Undertow but have not had any luck.

I am thinking the issue has more to do with the Referrer Policy.

Hey Scott, I know my suggestion seems way out of left field but we were pulling our hair out with something almost exactly like this months ago and it turns out it was just an incompatibility with the now deprecated “allowedMethods” found on the functions themselves. Took use hours of troubleshooting to stumble onto that… I say this because it doesn’t look like a CORS error at all to me. It looks like a ColdBox authentication/authorization problem.

1 Like

I am not sure what you mean by

“allowedMethods” found on the functions themselves

Do you mean in the controller methods? Or as part of the CORD module?

I’ve tried setting Access-Control-Allow-Origin to * in the server config for Undertow but have not had any luck.

Why in Undertow? You said you were using the CORS coldbox module?

The CORS module was added auto-magically when I set up the project. I forget the exact command, but it was to set up ColdBox to be used for RESTful API.

I am running the server locally (and likely on the production server) using the embedded server in CommandBox…which uses Undertow.

Your OPTIONS response is getting a 401. Do you have cbsecurity or another interceptor running in this application that would be sending that? Neither CORS nor ColdBox send 401 responses by default.

If you are using cbsecurity or another interceptor to do this work, you need to make sure that the CORS interceptor runs first. You’ll need to disable the auto registering by setting autoRegisterInterceptor=false

On the controller methods. Not everyone used them but we had a legacy project that had them and they conflict with the Router.cfc which was introduced later in the ColdBox.

I do not know if I have any other interceptors running. As I noted, I created the app using a command in ComandBox (cannot recall which one). From there I simply modified the code that was created to handle the login the way I need.

The particular endpoint I am trying to test is to log the user in. FWIW - this endpoint worked as expected when I was using fetch() to make remote calls. I started having CORS issues this weekend when I moved the remote calls to use Axios.

Well, if you want to upload the code somewhere, someone may be able to take a look. You definitely have some code you wrote or installed throwing a 401. CORS doesn’t at all and ColdBox only does if you are using the RestHandler and your code threw a InvalidCredentials or TokenInvalidException exception.

Can you please post the output of package list in your application?

I cannot post the code, unfortunately.

I am using the RestHandler and it seems that the 401 is being thrown due to invalid credentials…because when the OPTIONS request is being made, no data is passed.

It is also befuddling that this all worked as expected using fetch() and only started having issues when I switched to Axios.

I hope this is what you meant about the output of package list

image

Keeping everything the same on the server-side I updated everything on the client-side to use fetch() and now it is working. Seems maybe Axios was causing the issue.