API / Routes Response headers

Hello,

How can I set headers for responses from the API, or custom routes? I need to set content-type headers and access control headers. Is this even possible?

Example:

'routes' => [
[
  'pattern' => 'rest/data',
  'action'  => function () {
      header("Access-Control-Allow-Origin: *");
      header('Access-Control-Allow-Headers: X-Requested-With');
      header('Content-type: application/json; charset=utf-8');
 
      $return = array (
        'data' => 'some data'
      );

      return json_encode($return);
    }
],
],

I have also tried:

Header::create('Access-Control-Allow-Origin', '*');
Header::create('Content-type', 'application/json');

The reason being in my testing environment I am using a Vue app to consume data from Kirby, however my app url (http://localhost:8080) and my kirby url are not that same, therefore using authentication via the native API does not work. I also want to be able to customize endpoints.

Thanks

Ok, so changing return to echo did the trick for a custom route. However for the native API I can’t seem to get it to work, is this due to authentication? The request is authenticated and works when the origin is the same, but not when from localhost:8080

'routes' => [
[
  'pattern' => 'rest/data',
  'action'  => function () {
      header("Access-Control-Allow-Origin: *");
      header("Content-type: application/json");

      $return = array (
        'data' => 'some data'
      );

      echo json_encode($return);
    }
],
],

Native API:

'api' => [
'basicAuth' => true,
'routes' => [
  [
    'pattern' => 'data/chapters',
    'action'  => function () {
      header("Access-Control-Allow-Origin: *");
      
      $return = array (
        'data' => 'some data'
      );

      echo json_encode($return);
    }
  ],
]
]