Jquery AJAX: No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

I am trying to post data to an API from my localhost:4502 port. When i tried to post data to this API using POSTMAN the data got added in the backend by providing the Basic Authorization key. The same i am trying to implement here in the Ajax Jquery call, but getting an CORS error. First time in jquery i am trying to post the data, please help here, what i can add. I have got the API key to for the Basic Authorization as a Username and Password can be left blank.

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
               $(document).ready(function(){
               $("#Save").click(function(){
                  var person = new Object();
                  person.Name = $('#Name').val();
                  person.EmailAddress = $('#EmailAddress').val();
                  person.CustomFields = [0];
                  person.CustomFields[0].Key = "[Country]";
                  person.CustomFields[0].Value = $('#Country').val();;
               $.ajax({
                 url: 'https://api.createsend.com/api/v3.1/subscribers/7c7a6087b0e450ad72b38be83098e271.json',
                 type: 'POST',
                 dataType: 'json',
                 data:person,
                 success: function(data,textStatus,xhr){
                     console.log(data);
                 },
                 error: function(xhr,textStatus,errorThrown){
                     console.log('Error Something');
                 },
                 beforeSend: function(xhr) {
                    xhr.setRequestHeader("Authorization", "Basic OTdlMjVmNWJiMTdjNzI2MzVjOGU3NjlhOTI3ZTA3M2Q5MWZmMTA3ZDM2YTZkOWE5Og=="); 
                 }
             });
         });
     });
  </script>

Solution 1

I have added dataType: 'jsonp' and it works!

$.ajax({
   type: 'POST',
   crossDomain: true,
   dataType: 'jsonp',
   url: '',
   success: function(jsondata){
   }
})

JSONP is a method for sending JSON data without worrying about cross-domain issues. Read More

Solution 2

Its a CORS issue, your api cannot be accessed directly from remote or different origin, In order to allow other ip address or other origins from accessing you api, you should add the 'Access-Control-Allow-Origin' on the api's header, you can set its value to '*' if you want it to be accessible to all, or you can set specific domain or ips like 'http://siteA.com' or 'http://192. ip address ';

Include this on your api's header, it may vary depending on how you are displaying json data,

if your using ajax, to retrieve and display data your header would look like this,

$.ajax({
   url: '',
   headers: {  'Access-Control-Allow-Origin': 'http://The web site allowed to access' },
   data: data,
   type: 'dataType',
   /* etc */
   success: function(jsondata){
   }
})

Solution 3

If you are using NodeJs for your server side, just add these to your route and you will be Ok

     res.header("Access-Control-Allow-Origin", "*");
     res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

Your route will then look somehow like this

    router.post('/odin', function(req, res, next) {
      res.header("Access-Control-Allow-Origin", "*");
      res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    return res.json({Name: req.body.name, Phone: req.body.phone});
});

Client side for Ajax call

 var sendingData = {
   name: "Odinfono Emmanuel",
   phone: "1234567890"
}
<script>
  $(document).ready(function(){
    $.ajax({
        url: 'http://127.0.0.1:3000/odin',            
        method: 'POST',
        type: 'json',
        data: sendingData,
        success: function (response) {
            console.log(response);
        },
        error: function (error) {
            console.log(error);
        }
        });
    });
</script>

You should have something like this in your browser console as response

{ name: "Odinfono Emmanuel", phone: "1234567890"}

Enjoy coding....

Solution 4

Be aware to use constant HTTPS or HTTP for all requests. I had the same error msg: "No 'Access-Control-Allow-Origin' header is present on the requested resource."

View more solutions

Comments

[Admin]

Thank you, i will try to add the Allow-Origin thing at the API level and see. I hope it works :)

[apelidoko]

tell me if it works, if it didnt work, add a screenshot of the error, thank you!

[hogarth45]

If someone wants the explanation for this: stackoverflow.com/a/17299796/1815010

[Reddy SK]

it doesn't work for me .... I am trying to call elasticsearch servers from a Tomcat JSP page hosted on my laptop and getting the error. I have tried also headers: { 'Access-Control-Allow-Origin': '*' }, but with no success

[ρяσѕρєя K]

This post isn't an actual attempt at answering the question. Please note StackOverflow doesn't work like a discussion forum, it is a Q&A site where every post is either a question or an answer to a question. Posts can also have comments - small sentences like this one - that can be used to critique or request clarification from an author. This should be either a comment or a new question

[Ameerudheen.K]

I cant understand why 'Access-Control-Allow-Origin' added in this ajax header? it must be added on our server side right?

[gdm]

and this solution does not work it the remote does not reply with jsonp

[AtLeastTheresToast]

give this guy a medal.

[Čamo]

God bless you. Have a nice next 36 hours.

[Renny Ren]

BTW, the type: 'POST' won't work, because the jsonp dataType creates a <script> element to fetch data, which has to be a GET request

[stackunderflow]

how about i don't want to send json but i also don't want to worry abput cors?