axios preflight fail error 301 using vue.js

The server is is sending a redirect from:

http://backend-dev.xolas.io/api/v1/view/calendar/-30/90/

to:

http://backend-dev.xolas.io/api/v1/view/calendar/-30/90

Removing the trailing '/' in your request should prevent the 301. (Although that url is responding with a 500 Server Error.

Your browser’s sending a CORS preflight OPTIONS request before trying whatever request it is that your code’s actually trying to send itself, and then your Laravel backend is responding to that OPTIONS request with a 301 Moved Permanently redirect.

The server must respond to the OPTIONS preflight with a 2xx success status—typically 200 or 204.

If the server doesn’t do that, the preflight fails and the browser never tries the actual request.

So you must change your Laravel backend to respond to that OPTIONS with a 200 or 204.

And your browser does that preflight to begin with because your request adds Authorization and Content-Type: application/json;charset=utf-8 & Access-Control-Allow-Origin headers.

You should remove the code that’s adding the Access-Control-Allow-Origin there, because that header is a response header and there’s never any need to send it in a request. But assuming you need the Authorization and Content-Type headers in the request in order for it to actually work as expected with your backend, then there’s no way you can avoid the browser preflight.

So really need to configure your Laravel backend to respond to that OPTIONS with a 2xx success.