Getting Refused to connect to X because it violates the following Content Security Policy directive

HeyLasseL LasseMr Anonymous 

You are doing everything right, there seem to be a problem with URLs containing hyhpens, see this

You can also check wether your provided web access priviliges defined in the capabilities.json are really recognized by the visual using this check permission api. This should help you to do so using https://localhost as an example:

1. importing modules

import IWebAccessService = powerbi.extensibility.IWebAccessService;
import PrivilegeStatus = powerbi.PrivilegeStatus;

2. defining in visual class
public permissions: IWebAccessService;

3. assigning in contructor method
this.permissions = options.host.webAccessService;

4. using in constructor method
this.permissions.webAccessStatus("https://localhost").then((result) => {
console.log(result)
console.log(PrivilegeStatus["NotDeclared"])
}).catch((err) => {
console.log('ERROR', err);
});