Angular API call Refused to connect to '[URL]' because it violates Content Security Policy directive: "connect-src 'self'"

Question

Been at it for hours, tried multiple solutions none of them seem to work.

I get the below error on deployed application chrome, but locally it works fine.

 Refused to connect to 'https://api.test1.company.net/api/data' because it violates the following Content Security Policy directive: "connect-src 'self'". 

Internet explorer error;

SCRIPT7002: XMLHttpRequest: Network Error 0x2ef3, Could not complete the operation due to error 00002ef3

Below are some of the stuff I tried from multiple resources;

index.html

    <meta http-equiv="Content-Security-Policy" 
          content="default-src 'self' 'unsafe-inline' https://api.test1.company.net https://*.company.net https://api.test1.company.net/api/data;
          frame-src 'self' blob: file: https://*.company.net https://api-tesi1.company.net/api/data;
          script-src * 'self' 'unsafe-eval' 'unsafe-inline';
          connect-src 'self' https://api-tesi1.company.net https://*.company.net https://api-tesi1.company.net/api/data" >

service.ts, added it part of HttpHeaders

.set('Content-Security-Policy', 'default-src \'self\'...'

app.component.ts

constructor(private meta: Meta){
    this.meta.addTag({ 'http-equiv': 'Content-Security-Policy', content: 'default-src * \'self\' \'unsafe-inline\' https://api

Using Angular 12.2, below are some of the dependencies.

    "@angular/animations": "~12.2.0",
    "@angular/cdk": "^12.2.0",
    "@angular/common": "~12.2.0",
    "@angular/compiler": "~12.2.0",
    "@angular/core": "~12.2.0",
    "@angular/forms": "~12.2.0",
    "@angular/material": "^12.2.0",
    "@angular/platform-browser": "~12.2.0",
    "@angular/platform-browser-dynamic": "~12.2.0",
    "@angular/router": "~12.2.0",
    "rxjs": "^6.6.7",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"