0

Here is the full error message:

XMLHttpRequest cannot load http://api.nytimes.com/svc/search/v2/articesearch.json?q=&sort=newest&api-key=APIKEY_HERE. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 404.

I am trying to use the NY Times API to search for articles based on inputs from the page. Here is my javascript:

function loadData() {

var $body = $('body');
var $wikiElem = $('#wikipedia-links');
var $nytHeaderElem = $('#nytimes-header');
var $nytElem = $('#nytimes-articles');
var $greeting = $('#greeting');


$wikiElem.text("");
$nytElem.text("");


var streetStr = $("#street").val();
  var cityStr = $("#city").val();
  var address = streetStr + ", " + cityStr;
  $greeting.text('So you want to live at ' + address + '?');
  var streetViewURL = 'http://maps.googleapis.com/maps/api/streetview?size=600x300&location='+ address + '';
  $("body").append('<img class="bgimg" src="'+streetViewURL+'">');

    var nytimesUrl = 'http://api.nytimes.com/svc/search/v2/articesearch.json?q=' + cityStr + '&sort=newest&api-key=APIKEY_HERE';
    $.getJSON(nytimesUrl, function(data){

    nytHeaderElem.text("New York Times Articles About "+cityStr);

    articles = data.response.docs;
    for(var i = 0;i<articles.length;i++){
        var article = articles[i];
        nytElem.append('<li class="article">'+'<a 
    href="'+article.web_url+'">'+article.headline.main+'</a>'+'<p>' +article.snippet+'</p>'+'</li>');
            };

          });

      return false;
    };

    $('#form-container').submit(loadData);

my html is

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Your Moving Companion</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <!-- index.html file -->

<form id="form-container" class="form-container">
    <label for="street">Street: </label><input type="text" id="street" value="">
    <label for="city">City: </label><input type="text" id="city" value="">
    <button id="submit-btn">Submit</button>
</form>

<hr>

<h2 id="greeting" class="greeting">Where do you want to live?</h2>

<div class="wikipedia-container">
    <h3 id="wikipedia-header">Relevant Wikipedia Links</h3>
    <ul id="wikipedia-links">Type in an address above and find relevant Wikipedia articles here!</ul>
</div>

<div class="nytimes-container">
    <h3 id="nytimes-header">New York Times Articles</h3>
    <ul id="nytimes-articles" class="article-list">What's going on in your new city? Enter an address and hit submit and the NY Times will tell you here!</ul>
</div>

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"
       integrity="sha256-/SIrNqv8h6QGKDuNoLGA4iret+kyesCkHGzVUUV0shc="
       crossorigin="anonymous">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/file.js"></script>
</body>
</html>

thanks for the help

robertklep
  • 198,204
  • 35
  • 394
  • 381
Gavski02
  • 1
  • 1
    Possible duplicate of ["No 'Access-Control-Allow-Origin' header is present on the requested resource"](http://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource) – Tatsuyuki Ishi Apr 15 '17 at 05:21
  • If you are doing this from harddisk you will fail. You need do load this onto a web server – mplungjan Apr 15 '17 at 05:22
  • why cant i just run it from my local machine – Gavski02 Apr 15 '17 at 05:30
  • Because you machine does not tell the server where it came from. Also I see you have `crossorigin="anonymous"` - look at the last answer here: http://stackoverflow.com/questions/18336789/purpose-of-the-crossorigin-attribute – mplungjan Apr 15 '17 at 05:30
  • You can disable web security in chrome at startup but it is not recommended http://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome – mplungjan Apr 15 '17 at 05:33

1 Answers1

0

Looks like its a Cross Origin Issue, try to add this line in your http request header and let us know its working fine or not.

headers: {'Content-Type': 'application/x-www-form-urlencoded', 'X-Requested-With': 'XMLHttpRequest'}

SjVnyk
  • 698
  • 2
  • 7
  • 24