CODEWITHSUNDEEP
jquerywcfrestjqgridinternet-explorer-9
Madi
Madi

Reputation: 146

Requesting WCF Rest Service into JQGrid works with IE and not working with Chrome or Mozilla

i used WCF Restful Services as my business layer, when i try to 'GET' data from the service in IE 9 it just works fine and fill the JQgrid, but when i was trying to open the same page with Chrome or Firefox i got this error message.

{
    "statusText": "",
    "responseText": "",
    "response": "",
    "onabort": null,
    "readyState": 4,
    "upload": {
        "onloadstart": null,
        "onabort": null,
        "onerror": null,
        "onload": null,
        "onprogress": null
    },
    "onerror": null,
    "onreadystatechange": null,
    "status": 0,
    "responseXML": null,
    "onprogress": null,
    "onload": null,
    "withCredentials": false,
    "onloadstart": null,
    "responseType": ""
}

Service.svc

 [WebGet(UriTemplate = "LT_SectionListPage/?pageIndex={pageIndex}&pageSize={pageSize}&sortOrder={sortOrder}&sortColumn={sortColumn}", ResponseFormat = WebMessageFormat.Json)]  
    [OperationContract]

I used Fiddler2 to trace things out and here is the out put with IE9

HTTP/1.1 200 OK
Server: ASP.NET Development Server/10.0.0.0
Date: Thu, 12 May 2011 11:53:40 GMT
X-AspNet-Version: 2.0.50727
Cache-Control: private
Content-Type: application/json; charset=utf-8
Content-Length: 847
Connection: Close

and the output with Chrome

HTTP/1.1 405 Method Not Allowed
Server: ASP.NET Development Server/10.0.0.0
Date: Thu, 12 May 2011 11:54:07 GMT
X-AspNet-Version: 2.0.50727
Cache-Control: private
Content-Type: text/html
Content-Length: 1137
Connection: Close

<html version="-//W3C//DTD XHTML 2.0//EN" xml:lang="en" xsi:schemaLocation="http://www.w3.org/1999/xhtml http:// www.w3.org/MarkUp/SCHEMA/xhtml2.xsd" xmlns="http:// www.w3.org/1999/xhtml" xmlns:xsi="http:// www.w3.org/2001/XMLSchema-instance"><HEAD><TITLE>Request Error</TITLE></HEAD><BODY><DIV id="content"><P class="heading1"><B>Error Description:</B> 'HTTP Method not allowed'</P><P><B>This may be because an invalid URI or HTTP method was specified. Please see the <A HREF="http:// localhost:1111/Rest.svc/help">service help page</A> for constructing valid requests to the service.</B></P><!-- Padding xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx--></DIV></BODY></html>

Request in Chrome 

OPTIONS http:// localhost:1111/Rest.svc/LT_SectorListPage/json/?pageIndex=1&pageSize=100&sortOrder=asc&sortColumn=ID&_=1305207336766 HTTP/1.1
Host: localhost:1111
Connection: keep-alive
Referer: http:// localhost:1407/Default.aspx
Access-Control-Request-Method: GET
Origin: http:// localhost:1407
User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.65 Safari/534.24
Access-Control-Request-Headers: X-Requested-With, Accept
Accept: */*
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3

Request In IE9

GET http:// localhost:1111/Rest.svc/LT_SectorListPage/json/?pageIndex=1&pageSize=100&sortOrder=asc&sortColumn=ID&_=1305207423633 HTTP/1.1
x-requested-with: XMLHttpRequest
Accept-Language: ar-JO,en-US;q=0.5
Referer: http:// localhost:1407/Default.aspx
Accept: text/plain, */*
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)
Host: localhost:1111
Connection: Keep-Alive
Cookie: ASP.NET_SessionId=d212qpnffmvrzit1sx4z1mzb

Chrome does not accepts the method and IE9, any help would be appreciated.

Thanks

[Updated Fiddler Status]

after adding the following code into Global.asax to handle the CORS issue

protected void Application_BeginRequest(object sender, EventArgs e)
        {
            HttpContext.Current.Response.Cache.SetCacheability(HttpCacheability.NoCache);
            HttpContext.Current.Response.Cache.SetNoStore();
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin","*");
            if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
            {
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST");
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept");
                HttpContext.Current.Response.End();
            }
        }

Request

OPTIONS http:// localhost:1111/Rest.svc/LT_SectorListPage/json/?pageIndex=1&pageSize=100&sortOrder=asc&sortColumn=ID&_=1305213078870 HTTP/1.1
Host: localhost:1111
Connection: keep-alive
Referer: http:// localhost:1212/Default.aspx
Access-Control-Request-Method: GET
Origin: http:// localhost:1212
User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.65 Safari/534.24
Access-Control-Request-Headers: X-Requested-With, Accept
Accept: */*
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3

Response

HTTP/1.1 200 OK
Server: ASP.NET Development Server/10.0.0.0    
Date: Thu, 12 May 2011 15:11:18 GMT    
X-AspNet-Version: 2.0.50727    
Access-Control-Allow-Origin: *    
Access-Control-Allow-Methods: GET, POST    
Access-Control-Allow-Headers: Content-Type, Accept    
Cache-Control: no-cache, no-store    
Pragma: no-cache    
Expires: -1    
Content-Length: 0    
Connection: Close

Upvotes: 1

Views: 2730

Answers (2)

Madi
Madi

Reputation: 146

well i found the solution for this issue with this workaround

protected void Application_BeginRequest(object sender, EventArgs e)
        {
            //Enable Cross Domain WCF Configuration
            HttpContext.Current.Response.Cache.SetCacheability(HttpCacheability.NoCache);
            HttpContext.Current.Response.Cache.SetNoStore();
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
            string rqstMethod = HttpContext.Current.Request.Headers["Access-Control-Request-Method"];
            if (rqstMethod == "GET" || rqstMethod == "POST" || rqstMethod =="OPTIONS")
            {
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "X-Requested-With, Accept");
                HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "3628800");
                HttpContext.Current.Response.AddHeader("type", "application/json; charset=utf-8");
                HttpContext.Current.Response.End();
            }
        }

You should be-careful of the accepted headers in your request.

Big Thanks @Drew Marsh for help and useful documents

Upvotes: 0

Drew Marsh
Drew Marsh

Reputation: 33379

You're running into cross-domain issues because your service is being hosted on a different port (1111) than you client web page (1407). Therefore Chrome is making a Cross Origin Resource Sharing Request (CORS), which is what the OPTIONS request is, to check access before continuing and your service clearly doesn't support CORS at this time.

To remedy this you have to either implement support for CORS requests on your WCF service or run the web service off the same port as the web site. If they're both going to be on the same domain/port in a production environment there's no reason to spend time implementing CORS.

FWIW, IE would also fail in a production environment in this case. It's only working because you're hitting localhost which puts IE into the more lax intranet security policy.

Here's some more documentation on/examples of CORS:

Upvotes: 2

Related Questions