CORS issue between subdomains in Laravel5 - apache

Question

I built an API on Laravel5 and had CORS issues on localhost in development enviroment, so I developed this middleware and used on the API's routes, which solved the issue:
class Cors
{
/**
* Handle an incoming request.
*
* #param \Illuminate\Http\Request $request
* #param \Closure $next
* #return mixed
*/
public function handle($request, Closure $next)
{
$response = $next($request)
->header('Access-Control-Allow-Origin', 'http://zekrishna.com')
->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
return $response;
}
}
When I depolyed the app the CORS problems started again. I used the same server to host the API and front-end, where the front-end is on the server's root and the API on a subdomain.
Here's my .htacess on public/:
...
<IfModule mod_headers.c>
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"
</IfModule>
What am I doing wrong?
Here's the error:
XMLHttpRequest cannot load
http://api.zekrishna.com/api/agenda/?api_token=9BuDRcUxUbl9jW2FDnMxToijR8plDsT4xkVRg7m3AThJHJWXqsNSOGy94x1B.
Redirect from
'http://api.zekrishna.com/api/agenda/?api_token=9BuDRcUxUbl9jW2FDnMxToijR8plDsT4xkVRg7m3AThJHJWXqsNSOGy94x1B'
to
'http://api.zekrishna.com/api/agenda?api_token=9BuDRcUxUbl9jW2FDnMxToijR8plDsT4xkVRg7m3AThJHJWXqsNSOGy94x1B'
has been blocked by CORS policy: No 'Access-Control-Allow-Origin'
header is present on the requested resource. Origin
'http://zekrishna.com' is therefore not allowed access.
EDIT
I deleted my .htaccess rules and changed my middleware: (due to duplicated Access-Control-Allow-Origin on response header)
public function handle($request, Closure $next)
{
$response = $next($request)
->header('Access-Control-Allow-Origin', 'http://zekrishna.com')
->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
->header('Access-Control-Allow-Headers: *')
->header('Access-Control-Allow-Credentials: true')
->header('Access-Control-Allow-Credentials: true');
return $response;
}
I'm using jQuery $.ajax method to call the API
const API_TOKEN = '9BuDRcUxUbl9jW2FDnMxToijR8plDsT4xkVRg7m3AThJHJWXqsNSOGy94x1B';
const API = 'http://api.zekrishna.com/api';
...
$.ajax({
url: API + '/agenda/',
type: 'GET',
crossDomain: true,
data: {api_token: API_TOKEN}
})
.done(setConcerts)

Answer 1

I can access this via an HTTP GET, and there appears to be two headers sent. Your htaccess is setting one, as is your middleware.
XMLHttpRequest cannot load http://api.zekrishna.com/api/agenda?api_token=9BuDRcUxUbl9jW2FDnMxToijR8plDsT4xkVRg7m3AThJHJWXqsNSOGy94x1B. The 'Access-Control-Allow-Origin' header contains multiple values 'http://zekrishna.com, *', but only one is allowed. Origin is therefore not allowed access
Is it possible that your local environment htaccess isn't kicking in?

Answer 2

I removed the last slash on my request and worked!
The server was redirecting and these request was not allowed.
Before:
$.ajax({
url: API + '/agenda/',
...
})
then:
$.ajax({
url: API + '/agenda',
...
})