Question

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

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

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

在这个ive旁边，我用codeigniter（v2）创建了一个自己的API，它是一个简单的直截了当的api，带有一个处理几个请求的控制器。我正在本地MAMP安装上运行此API。使用网址http://apiname.myname.local。

已安装在Vue ive中，用于启动API调用。香港专业教育学院尝试与axios，提取，XMLHttpRequest和超级代理。这些似乎都不起作用。

在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 "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建设者中添加了以下内容： `< 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>`

还有这个变体：

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

我在vue应用程序中尝试了以下方法：



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

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

或者这个（尝试使用和不使用cors选项。使用和不使用凭据选项。

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

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

没有工作。

此外，在Chrome Dev工具中，似乎从未将标头添加到请求中（我认为是这样）。当我在“网络”标签中打开请求并单击“标头”标签时，这些就是“请求标头”。

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

`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();`

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

我还通过创建具有以下内容的vue.config.js来对Vue代理进行所有尝试：

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

我在Codeigniter中使用此代码来提示标题。 `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`

无论我尝试了什么，还是上面的不同组合，$ header_present始终为False！

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

Answer 1

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



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

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

现在我在我的应用中使用了以下代码：

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

这似乎可行，我的API现在收到了Authorization标头。但是即时消息接收到2个请求，并且Authorization标头仅填充在第二个请求中。

就目前而言，我在API中使用以下代码仅在以下情况下检查授权：

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

在我的数据响应中：

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

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

无法通过Vue和Codeigniter获得本地Api呼叫工作

1 个答案: