axios preflight fail error 301 using vue.js

Question

I've got a Laravel 5.4 API, that works fine in Postman and the Browser. Localhost works fine- Laravel 5.4 is running on one port, and Vue in hot deploy mode is running fine.

However, when I move the Vue code to my production server I get this error:

Response for preflight is invalid (redirect)

In Chrome Developer Tools, the network tab shows this:

General

Request URL:http://backend-dev.xolas.io/api/v1/view/calendar/-30/90/
Request Method:OPTIONS
Status Code:301 Moved Permanently
Remote Address:217.182.66.247:80
Referrer Policy:no-referrer-when-downgrade

Response Headers

Connection:Keep-Alive
Content-Length:349
Content-Type:text/html; charset=iso-8859-1
Date:Mon, 10 Jul 2017 13:40:08 GMT
Keep-Alive:timeout=5, max=100
Location:http://backend-dev.xolas.io/api/v1/view/calendar/-30/90
Server:Apache/2.4.25 (Ubuntu)

Origin Headers

Accept:*/*
Accept-Encoding:gzip, deflate
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:access-control-allow-origin,authorization
Access-Control-Request-Method:GET
Connection:keep-alive
Host:backend-dev.xolas.io
Origin:http://localhost:8080
Referer:http://localhost:8080/
User-Agent:Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.109 Mobile Safari/537.36

I've installed a CORS plugin on Laravel, still no joy.

My axios config is as follows:

axios.defaults.headers.common['Authorization'] = store.apiKey
axios.defaults.headers.get['Content-Type'] = 'application/json;charset=utf-8'
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8'
axios.defaults.headers.common['Access-Control-Allow-Origin'] = 'https://' + store.endpoint + ', http://' + store.endpoint

Endpoint is Larvel API server, which works fine.

Any clues would help, since I'm at a loss on how to resolve this. Thanks in advance.

Answer 1

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 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 the browser does a 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’s 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 you really must configure your Laravel backend to respond to OPTIONS with a 2xx success.

Answer 2

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.