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

Question

Background:

I installed mantisBT 2.5.0 on a test server, enabled the REST API (which is currently in beta phase). After that I generated an API Key and I have tried to make a test HTTP request using the swagger page on /api/rest/swagger. This works fine. (I could only access this page after renaming the .htaccess to _htaccess)

What I want to do:

I want to implement a feature in my app to enable sending "easy" bug reports without visiting mantisBT directly. To test the API I implemented this function, which just calls a "get issue" request. If this works, I can implement a method to create an issue.

Problem:

I can't add the the attribute 'Authorization' with my API token to the HTTP headers of my request. The result is that every time I make the request I get a HTTP Error 401. It seems to be an authorization issue.

Test function:

/**
* 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)});

Request Header copied from the console (Chrome):

: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

I think the error is that the request header are not set properly. They shouldn't have the name 'access-control-request-headers' but rather 'Authorization' only, for example. How can I set the headers properly?

EDIT: If I host my app on the same domain like mantisBT it all works fine. I don't understand why. I added header( 'Access-Control-Allow-Origin: *' ); to /api/rest/index.php

EDIT: It seems to be an error on server-side. Now I get this error:

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

It definitively has something to do with the fact, that the authentification header is not sent properly.

Answer 1

create headers and URLSearchParams first and add to the options.

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

I implemented a fix which does work for me: (I got working the POST issue function, but not the get issue function):

<?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;
    }
}

?>

save this script to the mantis folder and use the url to this file as request target. I named it rest-fix.php