-1

I am trying to integrate a third party API using JavaScript and its working fine on local but it is showing the error on live i.e. 

Access to XMLHttpRequest at 'https://newsapi.org/v2/top-headlines?country=in&category=technology' from origin 'https://www.example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Here is my JavaScript,

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myObj, i, x = "";
        myObj = JSON.parse(this.response);


        for (i=0;i<1;i++ in myObj.articles) {

            x += "<a href="+ myObj.articles[i].url +" target='blank'>"; 
            x += "<div style='background: linear-gradient(rgba(0,130,170,0),rgba(6,23,0,1)), url( "+ myObj.articles[i].urlToImage +" );height: 430px;margin-top: 20px;'>";          
            x += "</div>";          
            x += "</a>"; 

        }

        document.getElementById("technology").innerHTML = x;

    }
};

xmlhttp.open("GET", "https://newsapi.org/v2/top-headlines?country=in&category=technology", true);
xmlhttp.send();

HTML 

<div style="background-color: gray;height: 430px;margin-top: 20px;">
   p id="technology"></p>
</div>

I don't understand why this is happening.

Please help me out, Thanks in advance.

Bhawesh Bhakar
  • 55
  • 7
  • When I go on newsapi.org, it says right on the start page: `"Requests via the browser are not allowed on the Developer plan, except from localhost."` –  May 30 '20 at 09:21
  • But, its showing the blocked by CORS policy: No 'Access-Control-Allow-Origin' error – Bhawesh Bhakar May 30 '20 at 09:25
  • That error is very well known and means the server does not allow requests from in-browser JS code. You can see [here](https://codesandbox.io/s/priceless-hermann-q44jd?file=/src/index.js) that this does not happen from a backend, instead you're getting an error about the missing API key. Long story short: the API isn't free; if you want to use it, you have to pay for a plan. –  May 30 '20 at 09:33
  • Does this answer your question? [No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API](https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe) – Kishan Vaishnav May 30 '20 at 09:51

3 Answers3

1

The response is right in front of your eyes - You need to pay to use it outside of "localhost" domain which usually means you are develeping the site as developer thus you use the "Developer" plan. But when going live you need to pay up: plan comparision

And you clearly missing the API Key (if you havent cut it out to paste here;) ) in the request ;)

Damian
  • 64
  • 1
0

As mentioned by @chris-g you are not using api-key. You might try with API key and perhaps CORS issue would be gone. If you are still getting CORS, try simple jquery $ajax with jsonp or try a simple proxy server to forward the request and response.

icebug
  • 193
  • 4
0
var proxy_url = 'https://cors-anywhere.herokuapp.com/';
var url = 'https://newsapi.org/v2/top-headlines?country=us&category=sports&pageSize=5&apiKey=<your-api-key>';

Now you can you use the proxy_url to avoid the CORS policy error by adding the proxy_url in front of your URL with the API-KEY

new_url = proxy_url + url
Ashish
  • 63
  • 5