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 3 years ago

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!

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 :(

I am having same issue....

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 .

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 4 years ago

yeah even me to got it working by doing the same

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!

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.

I wonder if anybody solved this issue? Neither setting headers in .htaccess file nor Route::options worked for me.

I also stumbled and struggled with this with on FF. @Alain Martini suggestion's goes in the right direction. After more searching I found a Gist that fixed my issues!

https://gist.github.com/marcomessa/54d077a0208439f5340126ff629a3718

Thanks @marcomessa !

Last updated 3 years ago