[SOLVED] What is the problem in my code?

Question

I am trying to make a news website. But it is not working. I think API should not work. Can anyone help me?
https://code.sololearn.com/WGVxdlfDl9PS/?ref=app

Answer 1

There are a couple problems I immediately see:
- Since Sololearn provides your page over https, your API call will need to be made over HTTPS.
- Since you're hitting another origin(basically a domain other than code.sololearn.com) and CORS is restricted, you have another problem. If you have another server that can proxy your API request, that can set something like:
Access-Control-Allow-Origin: *

The JavaScript console shows this:
Mixed Content: The page at 'https://code.sololearn.com/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://newsapi.org/v2/top-headlines?country=in&category=technology&apiKey=7a553c96880846e7b40d336aae6d021e'. This request has been blocked; the content must be served over HTTPS.

After replacing http with https in your API's URL, the API responds with:
{"status":"error","code":"corsNotAllowed","message":"Requests from the browser are not allowed on the Developer plan, except from localhost."}
You could proxy the request off another server that responds with the required cors header or you might be able to update something in cloudflare to do it.

Your API response says that the server is cloudflare so this article might be useful detail explaining the CORS header:
https://support.cloudflare.com/hc/en-us/articles/200308847-Using-cross-origin-resource-sharing-CORS-with-Cloudflare