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.

Mauritamauritania

Answer 1

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.

Odilo

Thanks @MarKM that worked, but why x 2? 1) On localhost with different ports for Laravel and Vue, it works, wherease on the production side, it fails 2) Why would the trailing '/' cause the issue? Isn't that correct format ofr a URL. BTW the -30/90 are parameters to the API base URL. – Mauritamauritania

It depends on how the server is setup. I don't know if the trailing-slash/no-trailin-slash question is addressed in any spec. The import thing is that /-30/90/ and /-30/90 are actually two different URLs. The server is setup to respond to one by forwarding to the other. It does this with a 301 redirect. You could setup the server to deliver content to both, but it's less work just to give it the expected URL. Perhaps the local and prod servers behave differently in this respect. It's easy to investigate with curl -I http://backend-dev.xolas.io/api/v1/view/calendar/-30/90/ – Odilo

Thanks @MarkM, that makes sense. – Mauritamauritania

I searched so long für a mistake and that was it, wow.. Thanks, worked for me. – Facture

Answer 2

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.

Autarky

Thanks @sideshowbarker. I understand most of what you said, how do I tell Laravel to respond with 200 response? Is that based on the axios header info, or a config on the Laravel side? Thanks for your reply. – Mauritamauritania

If you do what @MarkM pointed out about removing the trailing slash from the request URL and then figure out and fix whatever’s causing the 500 failure on your backend, then I assume after those corrections you’ll just get a 2xx response for the OPTIONS request, without you needing to add any additional special handling for the OPTIONS other than what you’ve already got configured – Autarky

Answer 3

I was also encountered with this error when deploying my Vue.js application. In my case, I had set VITE_API_BASE_URL in my .env.production file to https://example.com/api, but my server was responding to requests at https://www.example.com/api. After hours of searching, I found that including the www in the URL solved my problem.

Rucksack