No Access Control Allow Origin error

[Autumn]

Hi all, I am just starting to learn how to code and need to work on a project for class. I am not able to access the API, even with my code. My console is returning "No Access Control Allow Origin header is present on the requested resource." Could someone tell me what that means?

[Piyush]

No Access Control Allow Origin
Error comes when


The error stems from a security mechanism that browsers implement called the same-origin policy.

To conduct the same-origin check, the browser accompanies all requests with a special request that sends the domain information receiving server. For example, for an app running on localhost:3000, the special request format looks like this:
Origin: http://localhost:3000

Reacting to this special request, the server sends back a response header. This header contains an Access-Control-Allow-Origin key, to specify which origins can access the server’s resources. The key will have one of two values:
One: the server can be really strict, and specify that only one origin can access it:
Access-Control-Allow-Origin: http://localhost:3000
Two: the server can let the gates go wide open, and specify the wildcard value to allow all domains to access its resources:
Access-Control-Allow-Origin: *
Once the browser receives this header information back, it compares the frontend domain with the Access-Control-Allow-Origin value from the server. If the frontend domain does not match the value, the browser raises the red flag and blocks the API request with the CORS policy error.

Solutions:

If you are using js/ajex then add herokuapp proxy before any Goodreads api like below
https://cors-anywhere.herokuapp.com/h...

But if you can use jQuery/ajex then set crossdomain attribute to true
This ajex method will take very less time than above proxy method.

[Autumn]

Thank you so much for your reply! I tried the herokuapp proxy but it did not work. Where can I set the crossdomain attribute? I think the problem is that it's using xml whereas I'm trying to use jquery and ajax. I would really like to use jquery and ajax because that is what my class is working on.

[Piyush]

Could you please share me your ajex/js code (I am assuming you are working on this) , so that I can check what you are doing wrong

[Autumn]

$(() => {

$('form').on('submit', (event)=> {

event.preventDefault();

const searchInput = $('input[type="text"]').val();

$.ajax(
{url:'https://cors-anywhere.herokuapp.com/h...' + searchInput}
).then(
// success callback
(data)=>{
console.log(data);
// $('#title').html(data.Title);
// $('#year').html(data.Year);
// $('#rated').html(data.Rated);

// console.log(data.Year)
},
// fail callback
()=>{
console.log(error);
}
);
})

})

[Piyush]

Please try to use this format
jQuery/ajex (change according to your need)


$(document).ready(function () {

$("#Save").click(function () {

var person = new Object();

person.name = "Sourav";

person.surname = "Kayal";

$.ajax({

url: 'http://localhost:3413/api/person',

type: 'POST',

dataType: 'json',

crossDomain: true,

data: person,

success: function (data, textStatus, xhr) {

console.log('Cross domain POST data' + data);

},

error: function (xhr, textStatus, errorThrown) {

console.log(errorThrown);

}

});

});

});