Cant get local Api call work with Vue and Codeigniter - api

Question

My wish: Making api calls on my local develoment environment.
My Problem: i use Headers for authorization, but my custom header is never seen in my api so the response is always 403 forbidden.
I'm new to creating Vue apps i've used the Vue CLI to create a local develop environment running on http://localhost:8080/ via npm run serve
Next to this ive created an own API with codeigniter (v2) its a simple straight forward api with 1 controller handling a couple of requests. I'm running this API on a local MAMP installation. with Url http://apiname.myname.local.
In Vue ive used mounted to start the API call. Ive tried this with axios, fetch, XMLHttpRequest and superagent. None of these seem to work.
In the MAMP apache config (httpd.conf) ive added this:
`< Directory />
Options Includes
AllowOverride All
Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "GET, PUT, POST, DELETE, OPTIONS"
Header always set Access-Control-Allow-Headers "authorization, Content-Type, X-Auth-Token,
Origin, Authorization, X-Auth-Token, x-auth-token"
< /Directory>`
And also this variant:
`< Directory />
Options Includes
AllowOverride All
Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "*"
Header always set Access-Control-Allow-Headers "*"
< /Directory>`
In the Codeigniter Controller contructor ive added this:
`header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: x-auth-token, X-Auth-Token, X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Authorization");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");`
And also this variant:
`header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: *");
header("Access-Control-Allow-Methods: *");`
In the vue app ive tried these:
`axios({
method: 'get',
headers: {
'Authorization': 'Whatever',
'X-Auth-Token': 'Whatever'
},
url: 'local_api_url'
}).finally(function () {
alert("ja");
});`
Or this (tried with and without the cors option. and with and without the credentials option.
`fetch('local_api_url',{
method: 'GET',
mode: 'no-cors',
headers: {
'Authorization': 'Whatever',
'X-Auth-Token': 'Whatever',
}
})`
Or this
`var x = new XMLHttpRequest();
x.open("GET","local_api_url");
x.setRequestHeader("Authorization","Whatever");
x.setRequestHeader("X-Auth-Token","Whatever");
x.send();`
None work.
Also in the Chrome Dev tools it looks like the header is never added to the request (well i think so) When i open the request in the network tab and click the tab Headers these are the Request Headers.
`Accept: */*
Accept-Encoding: gzip, deflate
Accept-Language: nl,de-DE;q=0.9,de;q=0.8,nl-NL;q=0.7,en-US;q=0.6,en;q=0.5
Access-Control-Request-Headers: authorization,x-auth-token
Access-Control-Request-Method: GET
Cache-Control: no-cache
Connection: keep-alive
Host: local_api_url
Origin: http://localhost:8080
Pragma: no-cache
Referer: http://localhost:8080/
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36`
And the response headers:
`Access-Control-Allow-Headers: authorization, Content-Type, X-Auth-Token, Origin, Authorization, X-Auth-Token, x-auth-token
Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS
Access-Control-Allow-Origin: *
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8
Date: Fri, 06 Dec 2019 10:52:20 GMT
Keep-Alive: timeout=5, max=100
Server: Apache
Set-Cookie: ci_session_blabla
Set-Cookie: ci_session_blabla
Set-Cookie: ci_session_blabla
Set-Cookie: ci_session_blabla
Set-Cookie: ci_session_blabla
Set-Cookie: ci_session_blabla
Transfer-Encoding: chunked
X-Powered-By: PHP/7.2.14`
Ive also tried all this with a Vue proxy by creating a vue.config.js with this content:
`module.exports = {
devServer: {
proxy: 'local_api_url'
}
}`
Im using this code in Codeigniter to het the headers.
`$headers1 = getallheaders();
$headers2 = $this->input->request_headers();
$header_present = array_key_exists('X-Auth-Token', $headers);`
Whatever ive tried, also different combinations of the above, $header_present is always False!
So basically i think ive tried all solutions presented in other topics (and other sites like Github) and now ive no idea how to fix this and seriously consider to do authentication trough the body of the request instead of the header. Can someone help me?

Answer 1

Ive got the following working: in MAMP ive added this to the httpd.conf:
SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1
now ive used this code in my app:
axios({
method: 'GET',
url: 'loal_api_url',
headers: {
'Authorization': 'Bearer api_key'
}
})
This seems to work, im receiving the Authorization header now in my API. But im receiving 2 requests and the Authorization header is only filled in the second request.
For now ive used the following code in my API to only check the Authorization when:
if ($_SERVER['REQUEST_METHOD'] != 'OPTIONS') {
if (!array_key_exists('Authorization', $headers){
ALLOW REQUEST
}
}
And also in my data response:
$return = "OKAY";
if ($_SERVER['REQUEST_METHOD'] != 'OPTIONS') {
$return = $retval;
}
http_response_code(200);
header('Content-type: application/json');
die(json_encode($return));