api - 无法使用 Vue 和 Codeigniter 进行本地 Api 调用

Question

我的愿望:在我的本地开发环境中调用 api。

我的问题:我使用 Headers 进行授权，但我的 api 中从未见过我的自定义 header ，因此响应始终为 403 禁止。

我是创建 Vue 应用程序的新手，我使用 Vue CLI 创建了在 http://localhost:8080/ 上运行的本地开发环境通过 npm run serve

在此旁边，我使用 codeigniter (v2) 创建了自己的 API，它是一个简单直接的 API，带有 1 个 Controller 处理几个请求。我在本地 MAMP 安装上运行这个 API。带网址 http://apiname.myname.local .

在 Vue 中，我使用 mount 来启动 API 调用。我已经用 axios、fetch、XMLHttpRequest 和 superagent 试过了。这些似乎都不起作用。

在 MAMP apache 配置(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 Controller 构造函数中，我添加了以下内容:

`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 开发工具中，看起来 header 从未添加到请求中(我认为是这样)当我在网络选项卡中打开请求并单击 header 时，这些是请求 header 。

`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.config.js 使用 Vue 代理尝试了所有这些:

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

我在 Codeigniter 中使用此代码来处理标题。

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

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

无论我尝试过什么，也是上述的不同组合， $header_present 总是假的!

所以基本上我认为我尝试了其他主题(和其他网站，如 Github)中提出的所有解决方案，现在我不知道如何解决这个问题，并认真考虑通过请求的正文而不是 header 进行身份验证。有人能帮我吗？

Answer 1

我有以下工作:在 MAMP 中，我将其添加到 httpd.conf:

SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1

现在我在我的应用程序中使用了这个代码:

axios({ 
    method: 'GET', 
    url: 'loal_api_url', 
    headers: { 
        'Authorization': 'Bearer api_key' 
    }
})

这似乎有效，我现在在我的 API 中收到授权 header 。但是我收到了 2 个请求，并且 Authorization header 仅填充在第二个请求中。

现在我在我的 API 中使用以下代码只在以下情况下检查授权:

if ($_SERVER['REQUEST_METHOD'] != 'OPTIONS') {
    if (!array_key_exists('Authorization', $headers){
        ALLOW REQUEST
    }
}

而且在我的数据响应中:

$return = "OKAY";
if ($_SERVER['REQUEST_METHOD'] != 'OPTIONS') {
    $return = $retval;
}

http_response_code(200);
header('Content-type: application/json');
die(json_encode($return));