No 'Access-Control-Allow-Origin' header is present - Food2Fork API call with AJAX

Question

My group and I are starting our first project, and ten minutes into API testing, I hit a wall and have been unable to create a successful access control header. Can anyone help me work through this error?

var userSearch = "chicken"


function apiCall() {

  var queryURL = "http://food2fork.com/api/search?key=3a4f22fb3ddd09f03521f9daf18117a1&q=" + userSearch; //+ "&sort=r"

 $.ajax({
    url: queryURL,
   method: "GET"
 }).done(function(response) {

      console.log(response);

 });
 };

apiCall();

"Failed to load http://food2fork.com/api/search?key=3a4f22fb3ddd09f03521f9daf18117a1&q=chicken: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access."

CORS means you can't access the remote site through a browser directly - proxies are your salvation — Jaromanda X, Dec 19 '17 at 02:59

score 1 · Answer 1 · answered Dec 19 '17 at 03:24

1

You need to use a reverse proxy to defeat CORS in browser. You can use a tool like this: CORS Proxy

answered Dec 19 '17 at 03:24

Ian

544
3
16

No 'Access-Control-Allow-Origin' header is present - Food2Fork API call with AJAX

1 Answers1