My react typescript app fails to load resources from API and it returns this error:

Content Security Policy: The page’s settings blocked the loading of a resource at http://api.xxxxx.com/v1/blogs (“default-src”).

I am using axios and this is how my request looks like:

    const headers = {
      'Content-Type': 'application/json',
      'Content-Security-Policy': 'default-src \'self\'',
      'Access-Control-Allow-Origin': '*',
    };
    const { data } = await this.$http.get<Item>(url, { headers });

I also added this line in the index.html

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

It allows in dev mode, but I deployed using azure static web apps and that is where it fails loading the resource, I was thinking if it has to do with any azure configs?

Edit1

Tried all the suggestions from this question but haven't solved the problem.