axios preflight fail error 301 using vue.js

vue.js cors laravel-5.4 axios preflight
Anthony picture Anthony · Jul 10, 2017 · Viewed 8.9k times · Source

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

Mark picture Mark · Jul 10, 2017

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.

Related questions

CORS error even after setting Access-Control-Allow-Origin or other Access-Control-Allow-* headers on client side

I have a Vue application generated with webpack-simple option. I am trying to make a GET request to https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en but I get the error: XMLHttpRequest cannot load https://…

Read More
CORS Post Request Fails

I built an API with the SLIM Micro-Framework. I setup some middleware that adds the CORS headers using the following code. class Cors{ public function __invoke(Request $request, Response $response, $next){ $response = $next($request, $response); return $response ->withHeader(…

Read More
CORS Missing Allow Origin

My server (written with Django) is running at http://localhost:8000. The Nuxt application is running at http://localhost:3000. When I send a request (like http://localhost:8000/api/v1/user/position/) to the server, I get the following error in the …

Read More