如何使用 angular Http 向 mantisBT 的 REST API 发出 HTTP 请求？

Question

背景：

我在测试服务器上安装了 mantisBT 2.5.0，启用了 REST API（目前处于测试阶段）。之后，我生成了一个 API 密钥，并尝试使用 /api/rest/swagger 上的 swagger 页面发出测试 HTTP 请求。这很好用。（我只能在将 .htaccess 重命名为 _htaccess 后才能访问此页面）

我想做的事情：

我想在我的应用程序中实现一项功能，以便在不直接访问 mantisBT 的情况下发送 "easy" 错误报告。为了测试 API 我实现了这个函数，它只调用了一个 "get issue" 请求。如果这可行，我可以实现一个创建问题的方法。

问题:

我无法将带有 API 令牌的属性 'Authorization' 添加到我请求的 HTTP header 中。结果是每次我发出请求都会得到一个 HTTP 错误 401。这似乎是一个授权问题。

测试函数:

/**
* function to test the API
* @returns {Observable<Response>}
*/
getIssue(): Observable<Response> {
  const api_token = 'XXXXXX';
  const params: URLSearchParams = new URLSearchParams();
  params.set('id', '1');
  const url = 'https://anydomain/mantisbt/api/rest/issues';

  const requestOptions = new RequestOptions({
     method: RequestMethod.Get,
     url: url,
     params: params,
     headers: new Headers({
       'Content-Type': 'application/json',
       'Authorization': api_token
     })
   });

   const req = new Request(requestOptions);
   return this.http.request(req);
}

...

this.getIssue().subscribe((result)=>{console.log(result)});

从控制台 (Chrome) 复制的请求 Header：

:authority:XXXXXXXX
:method:OPTIONS
:path:/mantisbt/api/rest/issues?id=1
:scheme:https
accept:*/*
accept-encoding:gzip, deflate, sdch, br
accept-language:de-DE,de;q=0.8,en-US;q=0.6,en;q=0.4
access-control-request-headers:authorization,content-type
access-control-request-method:GET
dnt:1
origin:http://localhost
referer:http://localhost/login
user-agent:XXXXXXXX

我认为错误是请求 header 设置不正确。例如，它们不应具有名称 'access-control-request-headers'，而应仅具有 'Authorization'。如何正确设置 headers？

编辑： 如果我将我的应用程序托管在与 mantisBT 相同的域中，则一切正常。我不明白为什么。我将 header( 'Access-Control-Allow-Origin: *' ); 添加到 /api/rest/index。php

编辑： 这似乎是 server-side 上的一个错误。现在我得到这个错误：

XMLHttpRequest cannot load https://XXXXXX/api/rest/issues?id=1.
Response for preflight has invalid HTTP status code 401

肯定与认证header发送不当有关

Answer 1

首先创建 headers 和 URLSearchParams 并添加到选项中。

let headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('Authorization': api_token);

let params = new URLSearchParams();
params.set('id', '1');
let options = new RequestOptions({ headers: headers, search: params });

return this.http
    .get(url, options);

Answer 2

我实施了一个对我有用的修复：（我开始使用 POST issue 函数，但不是 get issue 函数）：

<?php

$api_url = "https://XXXXXXXXXX/api/rest/issues"; //insert api url here

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: authorization, content-type');
header('Access-Control-Allow-Methods: POST,GET,OPTIONS,DELETE');

if (!function_exists('getallheaders')) {
    function getallheaders()
    {
        $headers = [];
        foreach ($_SERVER as $name => $value) {
            if (substr($name, 0, 5) == 'HTTP_') {
                $headers[str_replace(' ', '-', ucwords(strtolower(str_replace('_', ' ', substr($name, 5)))))] = $value;
            }
        }
        return $headers;
    }
}

$headers = getallheaders();
$method = $headers['Access-Control-Request-Method'];
$data = file_get_contents("php://input");

if (!empty($data)) {
    $method = 'POST';
} else if (!empty($_GET)) {
    $method = 'GET';
}

switch ($method) {
    case ('POST'):
        postRequest($headers, $api_url);
        break;
    case ('GET'):
        getRequest($headers, $api_url);
        break;
    case ('DELETE'):
        break;
}

function postRequest($headers, $api_url)
{
    // POST REQUEST
    $data = file_get_contents("php://input");
    if (!empty($data)) {
        $data = json_decode($data, true);

        if ($headers["Authorization"] != null) {
            $opts = [
                "http" => [
                    "method" => "POST",
                    "header" => "Accept: application/json\r\n" .
                        "Authorization: " . $headers["Authorization"] . "\r\n",
                    "content" => http_build_query($data)
                ]
            ];
            $context = stream_context_create($opts);
            // Open the file using the HTTP headers set above
            $file = file_get_contents($api_url, false, $context);

            echo $file;
        }
    }
}

function getRequest($headers, $api_url)
{
    // GET REQUEST

    print_r($_GET);
    if ($headers["Authorization"] != null) {
        $opts = [
            "http" => [
                "header" => "Accept: application/json\r\n" .
                    "Authorization: " . $headers["Authorization"] . "\r\n"
            ]
        ];
        $context = stream_context_create($opts);
        // Open the file using the HTTP headers set above
        $file = file_get_contents($api_url . "?" . http_build_query(array("id" => 10)), false, $context);

        echo $file;
    }
}

?>

将此脚本保存到 mantis 文件夹并使用 url 此文件作为请求目标。我把它命名为 rest-fix.php

如何使用 angular Http 向 mantisBT 的 REST API 发出 HTTP 请求？

How to make HTTP REQUEST to mantisBT's REST API using angular Http?

rest

mantis

httprequest

angular