23

Going nuts with this issue. I have a solution with 2 projects, one of them is a plain old html with jquery ajax call while the other is a WCF service. The html page will issue a ajax call to the WCF service to get a json string and use it for display purpose.

Now the issue is whenever i run in debug mode, both the html page and the WCF will be started with different port. And this has created a cross-origin issue for me when i perform testing (i.e. getting a 405 Method Not Allowed error with the calling type = OPTIONS in Firefox). I'd triple check the call method on my ajax script and the WCF service is the same (GET).

I'd search google but found that either i have to install a extension or perform some configuration on IIS, which i found cumbersome since what i'm doing is something simple. Following one example, I'd add in the following configuration in my web.config but it didn't work:

 <system.serviceModel> <bindings> <webHttpBinding> <binding name="crossDomain" crossDomainScriptAccessEnabled="true" /> </webHttpBinding> </bindings> <behaviors> <endpointBehaviors> <behavior name="MobileService.webHttpBehavior"> <webHttp /> </behavior> </endpointBehaviors> <serviceBehaviors> <behavior name="MyServiceBehavior"> <serviceMetadata httpGetEnabled="true" /> <serviceDebug includeExceptionDetailInFaults="true"/> </behavior> </serviceBehaviors> </behaviors> <serviceHostingEnvironment aspNetCompatibilityEnabled="true" multipleSiteBindingsEnabled="true" /> <services> <service name="MobileService.SimpleMemberInfo" behaviorConfiguration="MyServiceBehavior"> <endpoint address="" binding="webHttpBinding" contract="MobileService.IMemberInfo" bindingConfiguration="crossDomain" behaviorConfiguration="MobileService.webHttpBehavior"> </endpoint> </service> </services> </system.serviceModel> <system.webServer> <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /> <add name="Access-Control-Allow-Methods" value="GET" /> <add name="Access-Control-Allow-Headers" value="Content-Type, Accept" /> </customHeaders> </httpProtocol> <modules runAllManagedModulesForAllRequests="true"/> <directoryBrowse enabled="true"/> </system.webServer>

Any one has any idea to get rid of this annoying issue?

EDIT: Just to add, I'm running the debug with IIS Express that comes together with the VS Studio 2012

Add in WCF Code and Updated web.config

[ServiceContract] public interface IMemberInfo { [WebInvoke(Method = "GET", BodyStyle = WebMessageBodyStyle.Wrapped, ResponseFormat = WebMessageFormat.Json )] [OperationContract] string GetMemberInfoById(); // TODO: Add your service operations here }

My Script:

$(document).ready(function () { $.ajax("http://localhost:32972/SimpleMemberInfo.svc/GetMemberInfoById", { cache: false, beforeSend: function (xhr) { $.mobile.showPageLoadingMsg(); }, complete: function () { $.mobile.hidePageLoadingMsg(); }, contentType: 'application/json', dataType: 'json', type: 'GET', error: function () { alert('Something awful happened'); }, success: function (data) { var s = ""; s += "<li>" + data + "</li>"; $("#myList").html(s); } }); });
Improve this question
4
  • This link might help stackoverflow.com/questions/2202500/… Commented Nov 5, 2012 at 9:17
  • Thanks. I tried but it didn't work. Commented Nov 5, 2012 at 9:28
  • ops ok...but if none of the answer really helped then i should pick the closest one? Commented Nov 6, 2012 at 1:56
  • I have edited your title. Please see, "Should questions include “tags” in their titles?", where the consensus is "no, they should not". Commented Nov 6, 2012 at 2:26

5 Answers 5

Reset to default
11

You need to use JSONP for a cross-domain call to get round the browser restrictions, and to update your web.config with crossDomainScriptAccessEnabled set to true to get round server ones. There's a good example in the answer here: how to avoid cross domain policy in jquery ajax for consuming wcf service?

You may also have a problem with GET requests. Try the fixes outlined here: Making a WCF Web Service work with GET requests

Altogether, you want a web.config that looks something like this:

<bindings> <webHttpBinding> <binding name="crossDomain" crossDomainScriptAccessEnabled="true" /> </webHttpBinding> </bindings> <behaviors> <endpointBehavior> <behavior name="restBehavior"> <webHttp /> </behavior> </endpointBehavior> <serviceBehavior> <behavior name="MyServiceBehavior"> <serviceMetadata httpGetEnabled="true" /> <serviceDebug includeExceptionDetailInFaults="true"/> </behavior> </serviceBehavior> </behaviors> <services> <service name="..." behaviorConfiguration="MyServiceBehavior"> <endpoint address="" binding="webHttpBinding" bindingConfiguration="crossDomain" contract="..." behaviorConfigurations="restBehavior" /> </service> </services>

(Note that both the service and the endpoint have behaviours attached, allowing webHttp calls and httpGet calls respectively, and that the binding has crossDomain access explicitly enabled).

... a service method decorated like this:

[ServiceContract] public interface IMyService { [WebGet] // Required Attribute to allow GET [OperationContract] string MyMethod(string MyParam); }

... and a client call using JSONP:

<script type="text/javascript"> $(document).ready(function() { var url = "..."; $.getJSON(url + "?callback=?", null, function(result) { // Note crucial ?callback=? // Process result }); }); </script>
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Thanks. Just tried it but didn't work, the link to the client side example was dead. I tried added the crossDomain bindings in my web.config but it didn't work.
Just google or search here for JSONP - there are tons of examples, such as: stackoverflow.com/questions/2681466/jsonp-with-jquery Only fixing the server side isn't going to work.
Also - can you show your WCF code? In addition to permitting WebGet in Web.Config (as per the example above), you need to decorate your WCF method with the correct attribute.
really thanks for your help. I tried the new setting but doesn't work too, but i haven't try the json method. I'd updated my codes section as well.
Finally! After using the JSONP (the callback param is seriously crucial) and it worked!!!! A million thanks!
8

However its an old thread, but I would like add my comment about the problems I faced and the solution I got for working of CORS. I am developing a web service in the following environment:

  1. WCF web service.
  2. .NET 3.5 framework.
  3. Added wcf web service into existing asp.net website.
  4. Visual Studio 2008

Most of the people mentioned about adding the crossDomainScriptAccessEnabled attribute in tag under <webHttpBinding> in web.config. I am not sure this works or not but its not available in 3.5 version, so I had no choice. I also found that adding the following tags in web.config will work...

<httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /> <add name="Access-Control-Allow-Methods" value="GET" /> <add name="Access-Control-Allow-Headers" value="Content-Type, Accept" /> </customHeaders> </httpProtocol>

but no luck...kept getting 405 method not allowed errors

After struggling a lot with these options I found another solution to add these headers in global.asax file dynamically as per the given below...

protected void Application_BeginRequest(object sender, EventArgs e) { HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*"); if (HttpContext.Current.Request.HttpMethod == "OPTIONS") { HttpContext.Current.Response.AddHeader("Cache-Control", "no-cache"); HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST"); HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept, Authorization"); HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000"); HttpContext.Current.Response.End(); } }

And remove the from web.config. Publish the website and continue to client side jquery/ajax...and you will get the data from api calls. Good Luck!

Improve this answer

Comments

7

What worked for me was enabling WCF related features of IIS : enter image description here

Improve this answer

Comments

2

Just wanted to append some issues with the CORS rework at the bottom - The problem with it is that if your input does not support the GET and POST method, the OPTIONS request is not actually returning the correct allowed headers. It really isn't looking at which methods are actually allowed on the WCF endpoint - its just artificially saying "GET, POST" are allowed for every single endpoint in the application when a client performs an OPTIONS request (which is really the client asking what is supported).

This is probably OK, if you aren't really relying on the information in the OPTIONS method to return you a valid list of methods (as is the case with some CORS requests) - but if you are, you will need to do something like the solution on this question: How to handle Ajax JQUERY POST request with WCF self-host

Basically, each endpoint should implement:

Webinvoke(Method="OPTIONS", UriTemplate="")

and call an appropriate method which loads the proper headers to the response (including the proper "Access-Control-Allow-Method" list for that endpoint) to the caller. It kind of sucks that hosted WCF endpoints don't do this for us automatically, but this is a workaround that allows finer control over the endpoint. In that solution the proper response headers are loaded at the endpoint implementation:

public void GetOptions() { // The data loaded in these headers should match whatever it is you support on the endpoint // for your application. // For Origin: The "*" should really be a list of valid cross site domains for better security // For Methods: The list should be the list of support methods for the endpoint // For Allowed Headers: The list should be the supported header for your application WebOperationContext.Current.OutgoingResponse.Headers.Add("Access-Control-Allow-Origin", "*"); WebOperationContext.Current.OutgoingResponse.Headers.Add("Access-Control-Allow-Methods", "POST, GET, OPTIONS"); WebOperationContext.Current.OutgoingResponse.Headers.Add("Access-Control-Allow-Headers", "Content-Type, Accept, Authorization"); }
Improve this answer

Comments

-3

try to use. WebInvoke(Method = "POST") instead of WebInvoke(Method = "GET")

Improve this answer

2 Comments

negative voting without comments ? thanks
I think the problem is your solution doesn't actually fix the problem, and also the verbs are meant for specific use-cases, so just switching them when they don't work isn't really good practice. Your idea might work as a temporary workaround, but isn't an actual solution.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.