how to send json object to asp.net in javascript?

Question

I tried to call a asp.net controller method with a json string/object from javascript.

The asp.net controller:

public class HomeController : Controller
{

     public ActionResult doWork(string data) {
          // dowork..
          return new EmptyResult();
     }
}

And in the javascript is:

var XHR=new XMLHttpRequest();
XHR.open("GET", 'http://localhost:58476/home/dowork', true);
XHR.setRequestHeader("Accept","application/json");
XHR.onreadystatechange = function () {
    if (XHR.readyState == 4 && XHR.status == 200) {
        alert('ok');
    }else{
        alert('not ok');

    }
};
XHR.send(JSON.stringify(queryResult));

If the javascripts run it will call dowork method in asp.net, but data is null. And in de onreadystatechange it is calling the 'not ok'-alert.

In my console log I found the error:

XMLHttpRequest cannot load http://localhost:58476/home/dowork. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8081' is therefore not allowed access.

Does somebody know how to fix this?

Zippy · Accepted Answer · 2015-07-14 08:33:10Z

2

One easy solution would be to add the Access-Control-Allow-Origin.
You can add this to your web.config file like:

<system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
      </customHeaders>
    </httpProtocol>
</system.webServer>

Also, you can send data only on POST request, you're doing a GET request. More info on send method check w3schools
This means that you have to change your XHR.Open method to XHR.open("POST", 'localhost:58476/home/dowork', true);

edited Jul 14, 2015 at 8:33

answered Jul 13, 2015 at 10:08

Zippy

1,8365 gold badges28 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user3432681 Over a year ago

The 'ok' alert is shown. but the data in in the method dowork is still null. How can if fix this?

Zippy Over a year ago

is queryResult containing any data?

user3432681 Over a year ago

Yes it is!, i have also tried to do var data = 'someDate'; XHR.send(JSON.stringify(data)); but in dowork() data is still null.

Zippy Over a year ago

Also, you can send data only on POST request, you're doing a GET request. More info on send method check w3schools

user3432681 Over a year ago

i have also chang it to a httpPost reqest and in the aps.net [HttpPost] but still data = null

|

user4535447 · Accepted Answer · 2015-07-13 10:16:09Z

1

Obviously , The javascript code is sending a request to a different server to the one where the page was originally loaded from.

The first server is listening on port 8081 , and the other one is listening on port 58476.

Due to the same-origin policy , you can't send AJAX requests to any server other than the server the JS script is hosted on.

while you can turn off this security feature , it is not recommended to turn it off unless you keep in mind that anyone can inject a Javascript code in your page and make it send requests , which might contain sensitive data like authentication cookies , to their server .

answered Jul 13, 2015 at 10:16

user4535447

1 Comment

user3432681 Over a year ago

So i cannot do httprequest from 8081 to another port? if so, how do I turn off this security feature?

Collectives™ on Stack Overflow

how to send json object to asp.net in javascript?

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related