lickwid
lickwid

So I've been searching for two days how to figure this out. I've got a vuejs frontend that I'm trying to connect to an octobercms api that I'm creating. I'm using JWT Auth for the auth api. For Vue I'm using axios (which I've heard has caused problems because how they use xhttprequest). I found the CORS plugin written by OFFLINE (and the other plugin). I've tried both.

First I'll get the no HTTP Header CORS error. Easy peasy, add the localhost:8080 to the allowed domains. However, after that I keep getting:

OPTIONS http://connectapi.localhost/api/login 404 (Not Found)

Access to XMLHttpRequest at 'http://connectapi.localhost/api/login' from origin 'http://connectfe.localhost' has been blocked >by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

From what I understand it's saying the OPTIONS preflight check is failing because it's blocked or doesn't exist. I've added the OPTIONS method to the allowed method in the CORS plugin, to no avail. I've also tried some workarounds in nginx, and I'm looking into using a proxy in vue to get around it, but that doesn't really address the problem.

Edit: Also, I've checked using postman. The API is working correctly. Just seems like axios wants to preflight check, which isn't being supported for some reason?

Anyone have any suggestions? Is there other stuff you have to add in the CORS plugin I might not be adding?

Thanks!

Last updated

axomat
axomat

Hi I have just the same problem and it only started yesterday when I updated to the latest version of octobercms. Previously I have bbeen using cors no problem with jwt. Now I get a 404 on the options preflight request. I have put the jwt-auth plugin back to the previous version and that does not solve it. Sorry that I cant help you lickwid but maybe it helps to know you are not alone!

lickwid
lickwid

Thanks :P If you still need a solution I eventually switched to fetch (for vue). Not sure what frontend you're using, but might be the only way to fix it :(

dixitpatel8923717
dixitpatel8923717

I am having same issue....

manrox.drag17392
manrox.drag17392

Did you guys get this working have used Cors by offline plugin earlier it is working in different project but finding it hard to get this one rolling . if you guys have done any work around do suggest .

gabor19990
gabor19990

I got it working by adding:

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"

RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]

in the begining of the .htaccess of October. I could NOT get the preflight work with any of the CORS plugins from the marketplace. Adjust Access-Control-Allow-Origin to some more specific of course.

Last updated

manrox.drag17392
manrox.drag17392

yeah even me to got it working by doing the same

Alain Martini
Alain Martini

I have made it working also adding

Route::options('/myendpoint', 'ACME\Module\Controllers\MyController@thing');

otherwise the preflight that is made via the OPTIONS method goes in a 404 error and CORS fails even if you have the correct headers!

willybabuu1555948
willybabuu1555948

Alain Martini said:

I have made it working also adding

Route::options('/myendpoint', 'ACME\Module\Controllers\MyController@thing');

otherwise the preflight that is made via the OPTIONS method goes in a 404 error and CORS fails even if you have the correct headers!

Please tell me how to add these codes, the above solutions didnt work for me. I too experience the same error.

1-9 of 9