**我的愿望：**在本地开发环境中调用API。
**我的问题：**我使用Headers进行授权，但我的API中从未看到我的自定义头，因此响应始终是403禁止。

我是创建Vue应用程序的新手，我使用Vue CLI通过npm run serve创建了一个在http：//localhost：8080/上运行的本地开发环境。
接下来，我用codeigniter（v2）创建了一个自己的API，它是一个简单的直接API，一个控制器处理几个请求。我在本地MAMP安装上运行此API，URL为http://apiname.myname.local。
在Vue中，我使用mount来启动API调用。我已经用axios，fetch，XMLHttpRequest和superagent试过了。这些似乎都不起作用。
在MAMPapache配置文件（httpd.conf）中，我添加了以下内容：

< 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>

字符串
还有这个变体：

< 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>

型
在Codeigniter控制器构造器中，我添加了以下内容：

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");

型
还有这个变体：

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: *");
header("Access-Control-Allow-Methods: *");

型
在vue应用程序中，我尝试了这些：

axios({
    method: 'get',
    headers: {
        'Authorization': 'Whatever',
        'X-Auth-Token': 'Whatever'
    },
    url: 'local_api_url'
}).finally(function () {
    alert("ja");
});

型
或者这个（在使用和不使用CORS选项以及使用和不使用凭据选项的情况下进行了尝试。

fetch('local_api_url',{
    method: 'GET',
    mode: 'no-cors',
    headers: {
        'Authorization': 'Whatever',
        'X-Auth-Token': 'Whatever',
    }
})

型
或者这个：

var x = new XMLHttpRequest();
x.open("GET","local_api_url");
x.setRequestHeader("Authorization","Whatever");
x.setRequestHeader("X-Auth-Token","Whatever");
x.send();

型
都不管用。
同样在Chrome开发工具中，看起来头文件从未添加到请求中（我认为是这样）。当我在网络选项卡中打开请求并单击选项卡标题时，这些是请求标题。

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

型
和响应头：

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

型
我也尝试过使用Vue代理，创建了一个包含以下内容的vue.config.js：

module.exports = {
    devServer: {
        proxy: 'local_api_url'
    }
}

型
我在Codeigniter中使用这段代码来设置header。

$headers1 = getallheaders();
$headers2 = $this->input->request_headers();

$header_present = array_key_exists('X-Auth-Token', $headers);

型

无论我试过什么，也不管上面的不同组合，$header_present总是False！

所以基本上我想我已经尝试了其他主题（和其他网站，如Github）中提出的所有解决方案，现在我不知道如何解决这个问题，并认真考虑通过请求的主体而不是头部进行身份验证。有人能帮帮我吗