0

I am developing an application in which from a website project I give a call to web api method using ajax call javascript. When I run both projects locally it works fine, but when I do publish web api project on demo site the ajax call does not reach to the web api method. My ajax call is as follows-

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <title></title>


    <script type="text/javascript">
        $(document).ready(function () {
   var url = 'http://abc.demo.in/c60/api/Patient/Create/';
            $.ajax({
                url: url,
                data: getData(),
                type: 'POST',
                contentType: "application/json",
                success: function (result) {
                    console.log(result);
                    alert("success")
                },
                error: function (result) {
                            alert('POST failed.');
                        }
            });

            function getData() {
                var patient = new Object();
                patient.Name = "Mugdha";
                patient.Gender = "Female";
                patient.Email = "mugdhaShenoy@yahoo.co.in";
                patient.Mobile = "";
                patient.BloodGroup = "AB+";
                patient.MedicalHistory = "High BP, Cholosterol, Diebetis";
                patient.Allergy = "Dust, wind";
                patient.EmergencyContactName = "Riya Sahani";
                patient.EmergencyContactNo = "9988990200";
                patient.ProfileImage = "";
                patient.FormNo = "92";
                patient.BirthDate = new Date(1989, 09, 08).toISOString();
                return patient;
            }

</script>
</head>
<body>

</body>
</html>

When I try to reach the api domain(which is on different server) I have faced an error as -

XMLHttpRequest cannot load http://abc.demo.in/c60/api/Patient/Create/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:49370' is therefore not allowed access.

Is there any solution for this? I have added CorsHandler.cs file in my webapi project.

Sayli Vaidya
  • 179
  • 1
  • 14
  • See my answer in this post if it could be helpful http://stackoverflow.com/questions/29466380/how-to-add-res-addheaderaccess-control-allow-origin-in-express-js/29466458#29466458 – Reena Apr 07 '15 at 10:24
  • You also need to setup crossDomain: true in ajax if you have used CorsHandler.cs – Reena Apr 07 '15 at 10:26
  • Also need to register a Cross-Domain handler in our application. So open the Global.asax file and put the following lines for the Application_Start() event. GlobalConfiguration.Configuration.MessageHandlers.Add(new CorsHandler()); – Reena Apr 07 '15 at 10:28
  • I already have `GlobalConfiguration.Configuration.MessageHandlers.Add(new CorsHandler());` in my `Application_Start()` and also tried with setting up `crossDomain: true` in ajax but still does not working – Sayli Vaidya Apr 07 '15 at 10:48
  • have you added setup crossDomain:true in ajax – Reena Apr 07 '15 at 10:50
  • yes.. the code for ajax is as `var url = 'http://abc.demo.in/c60/api/Patient/Create/'; $.ajax({ url: url, data: getData(), type: 'POST', contentType: "application/json", crossDomain: true , success: function (result) { console.log(result); alert("success") }, error: function (result) { alert('POST failed.'); } });` – Sayli Vaidya Apr 07 '15 at 10:54
  • But in your code pasted above I can't see this setup – Reena Apr 07 '15 at 10:55
  • I have made appropriate changes in ajax call..but still having same issue..What I'm doing wrong? – Sayli Vaidya Apr 07 '15 at 13:02

0 Answers0