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

Posted 2023-02-22

【中文标题】无法使用 Vue 和 Codeigniter 进行本地 Api 调用

【英文标题】：Cant get local Api call work with Vue and Codeigniter

【发布时间】：2020-03-31 09:31:01

【问题描述】：

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

我的问题：我使用 Headers 进行授权，但我的 api 中从未看到我的自定义标头，因此响应始终是 403 禁止。

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

在此之后，我使用 codeigniter (v2) 创建了一个自己的 API，它是一个简单直接的 api，其中 1 个控制器处理几个请求。我在本地 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 控制器构造器中，我添加了以下内容：

`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 中使用此代码来处理标题。

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

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

无论我尝试过什么，以及上述的不同组合，$header_present 总是 False！

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

【问题讨论】：

您是否正在检查您的控制台是否有错误，如果有，它们是什么？

控制台中没有显示错误。

【参考方案1】：

我已经完成了以下工作：在 MAMP 中，我将其添加到 httpd.conf：

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

现在我在我的应用程序中使用了这段代码：

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

---

这似乎有效，我现在在我的 API 中接收到授权标头。但是我收到了 2 个请求，并且 Authorization 标头只填写了第二个请求。

目前我在我的 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));