How to Properly Use Response Headers for Content Security Policy

Question

A code scanning report is identifying a vulnerability indicating that a Content Security Policy is not explicitly defined within the web application. I've tried the code below, but for some reason it's affecting my SSO functionality. Once I get authenticated, the I get error: Failed to load resource: the server responded with a status of 502.

I got the error after I added the code below. It may be possible that I'm overcomplicating the code related to the policies. If I remove the code related to the "Content-Security-Policy", it works fine. I just need to mitigate the issue.

This works fine in my DEV environment, but issue occurs in my test environment.

Any feedback is greatly appreciated.

app.use(async (context, next) => {         
	context.Response.Headers.Add("X-Frame-Options", "SAMEORIGIN"); 	
	context.Response.Headers.Add("Content-Security-Policy",         
	"script-src  'self' 'unsafe-eval' 'unsafe-inline' maxcdn.bootstrapcdn.com;"       
	+ "style-src 'self' 'unsafe-inline' maxcdn.bootstrapcdn.com fonts.googleapis.com;"       
	+ "font-src  'self' 'unsafe-inline' maxcdn.bootstrapcdn.com fonts.googleapis.com;");    
  await next(); 
}