0

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.

Sachihiro
  • 1,597
  • 2
  • 20
  • 46
  • Did you whitelist the domain you request the resourve from in Azure? Sounds like a server config problem to me. The `Access-Control-Allow-Origin` header should come from the server. – Gh05d Apr 21 '22 at 11:36
  • No I haven't, that where I should look for perhaps. – Sachihiro Apr 21 '22 at 11:38

0 Answers0