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

[vuyiswamb]

Good Day

i have a web api that i want to call on the client side and return its contents, so it s a post and i return some string. Now i have a form that will have the data to be posted as depicted below

    <form name="registrationForm"    method="post">

and there are other controls within the form and i have a button that triggers the post as depicted below

  <input title="Register"  onclick="ProcessRegistration();" style="width: 100px; height: 100px; align-self: center" type="submit" name="submit_fourth" id="submit1" value="register" />

onCick i call a function from the client side, the definition of the function is

     function ProcessRegistration()
       {
      
           $.getJSON("http://www.mydomain.maindomain.com/api/Registration/Create", function (data) {
                
               alert(data);
           });
          
         
       }

now when i click the button to fire the service i get the following error in the console

XMLHttpRequest cannot load http://www.mydomain.maindomain.com/api/Registration/Create. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:46506' is therefore not allowed access. 

Does anyone know how to solve this ?

Thanks

[kfcSmitty]

You'll need to use JSONP. You cannot request JSON from another server normally.

Below is a blog post I found detailing how to make the request using jquery:

http://codeforbrowser.com/blog/cross...ery-and-jsonp/

[vuyiswamb]

hi

Thanks for the reply, i followed the link you sent me , implemented it as below

   function ProcessRegistration() {

           //$.getJSON("http://www.mydomain.maindomain.com/api/Registration/Create", function (data) {

           //    alert(data);
           //}); 
           $(
          function 
          () {
              $.ajax({
                  type:'POST'
              ,
                  dataType:'jsonp'        ,
                  jsonp:'jsonp'
              ,
                  url:'http://www.mydomain.maindomain.com/api/Registration/Create'
              ,
                  success:
                  function 
                  (data)
                  {
                      alert(data);
                  },
                  error:
                    function 
                    () {

                        alert("Sorry, I can't get the feed");

                    }

              });

          });

       }

but i still get the same error

[tr333]

CORS is what you want to use, if your browser supports it. Otherwise, you would be stuck with the older, less secure JSON-P.

You need to enable it on the server-side to allow it to work properly.

http://www.bennadel.com/blog/2327-Cr...nd-Node-js.htm
http://www.html5rocks.com/en/tutorials/cors/

[sapator]

Hey guys, just read this.
Since i haven't done any cross domain web service deployment, am i correct to assume that what you are saying is that you cannot use the simple Jquery with Json to call web services across different servers and domains?
Thanks.

[tr333]

Hey guys, just read this.
Since i haven't done any cross domain web service deployment, am i correct to assume that what you are saying is that you cannot use the simple Jquery with Json to call web services across different servers and domains?
Thanks.

You can, but the remote server on another domain also needs to be configured to send the correct headers to allow connections from your domain.

[sapator]

Ok. Will look for an example if i need it, just wanted to be sure. In case you are aware of an example let me know.Can't rep you but thanks.