CODEWITHSUNDEEP
ajaxasp.net-web-apikendo-uikendo-gridkendo-asp.net-mvc
lincx
lincx

Reputation: 253

Kendo UI Grid request method is OPTIONS even if I intend to POST

I trying to POST data to my web api from Kendo Ui Grid

var crudServiceBaseUrl = "http://127.255.0.1:8081/api",
        dataSource = new kendo.data.DataSource({
            transport: {
                read:  {
                    url: crudServiceBaseUrl + "/meeting",
                    dataType: "jsonp",
                },
                update: {
                    type: "POST",
                    url: crudServiceBaseUrl + "/meeting/postmeeting",
                    contentType: "application/json; charset=utf-8",
                    dataType: 'json',

                    success: function (msg) {
                        alert("success");
                    }
                },

          .....


    $("#grid").kendoGrid({
        dataSource: dataSource,
        pageable: true,
        toolbar: ["create"],
        columns: [
            { field: "Organizer", title: "Organizer" },
            { field: "Title", title: "Title" },
            { field: "Location", title: "Location", },
            { command: ["edit", "destroy"], title: " ", width: "160px" }],

        editable: "inline"
    });

but when I do update

I get 405 error

Request URL:http://127.255.0.1:8081/api/meeting/postmeeting
Request Method:OPTIONS
Status Code:405 Method Not Allowed
Request Headersview source
Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:accept, origin, content-type
Access-Control-Request-Method:POST
Host:127.255.0.1:8081
Origin:http://localhost:30320
Proxy-Connection:keep-alive

Can someone explain to me how come the request Method become OPTION? as a result the POST method in my ASP.NET Web API doesnt called

  [HttpPost]
  public HttpResponseMessage PostMeeting(MeetingEntity meeting)
    {
        _meetingRepository.Update(meeting);
        return new HttpResponseMessage(HttpStatusCode.OK);
    }

Upvotes: 1

Views: 3018

Answers (1)

Badrinarayanan Lakshmiraghavan
Badrinarayanan Lakshmiraghavan

Reputation: 19311

If you are accessing http://127.255.0.1:8081/api/meeting/postmeeting from http://localhost:30320, it is a cross-origin request. By default, browsers prevent access to a resource which is in a different origin. Check this out.

Cross-Origin Resource Sharing (CORS) is one way to get around this limitation. Since you do a POST, the browser makes a pre-flighted CORS request, which is basically an OPTIONS request. If this OPTIONS request results in a response with necessary CORS headers, the browser will make the POST request subsequently. You can implement an action method to handle OPTIONS but it is very easy to enable CORS in Web API now. Check this link.

Upvotes: 1

Related Questions