API Request from GitHub pages doesn't work ("mixed block")

Question

So I deployed all of my React apps that are using an API. I am having problems sending this api and something block them and so my apps aren't working.

Note: all of my requests are cors so there is no problem with them.

github block my request

and this is link to the project in picture news-blog

Answer 1

The problem is that you're trying to fetch non-secure (http) content from a secure (https) site, which violates the site's Content-Security-Policy (CSP) . This is an insecure behavior as far as modern browsers are concerned.

From MDN:

The HTTP Content-Security-Policy response header allows web site administrators to control resources the user agent is allowed to load for a given page. With a few exceptions, policies mostly involve specifying server origins and script endpoints. This helps guard against cross-site scripting attacks (XSS).

The right way of solving this would be to load the data from a secure source. For example, instead of fetching from http://newsapi.org/v2/everything , try https://newsapi.org/v2/everything (note the difference between http and https).