Access .asmx webservice cross domain and load results into cascading dropdown

Question

I have 2 sites.

I also have a webservice.

You can see this in action when I load countrynames in the cascading dropdown on: http://www.mydomain.com/trouwlocaties/zoeken-uitgebreid

However, the same webservice throws an error on: http://otherdomain.com/weddingvenues/search-advanced As you can see the dropdown shows 'method error -1' and in my Chrome console I see: 500 (Internal Server Error), where the client tries to GET the .asmx service, where on toptrouwen it uses POST (which is as I believe what's supposed to happen and also more secure).

This is the GetCountries webservice:

<System.Web.Script.Services.ScriptService()> _
<System.Web.Services.WebService(Namespace:="http://tempuri.org/")> _
<System.Web.Services.WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
<ToolboxItem(False)> _
Public Class geolocation
'<System.Web.Script.Services.ScriptService()> _
'<WebService(Namespace:="http://tempuri.org/")> _
'<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
'<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _


Inherits System.Web.Services.WebService

<WebMethod()> _
Public Function GetCountries(ByVal knownCategoryValues As String, ByVal category As String) As CascadingDropDownNameValue()
    Dim values As New List(Of CascadingDropDownNameValue)

    Dim myConnection As SqlConnection = GetConnection()
    Dim cmd As New SqlCommand(String.Format("SELECT id,name as title FROM country order by title asc", Threading.Thread.CurrentThread.CurrentCulture.TwoLetterISOLanguageName), myConnection)
    Try
        myConnection.Open()
        Dim reader As SqlDataReader = cmd.ExecuteReader
        Dim CountryName As String
        Dim CountryID As Integer
        While reader.Read
            CountryName = reader("title").ToString
            Int32.TryParse(reader("id"), CountryID)
            values.Add(New CascadingDropDownNameValue(CountryName, CountryID.ToString))
        End While
    Catch ex As Exception

    Finally
        myConnection.Close()
    End Try

    Return values.ToArray
End Function

End Class   

First I tried adding this to my web.config:

<system.web>
<webServices>
  <protocols>
    <remove name="Documentation"/>
    <add name="HttpGet"/>
    <add name="HttpPost"/>
  </protocols>
</webServices>
</system.web>

After doing that, I receiving this in my Chrome console:

Uncaught SyntaxError: Unexpected token < 

Where apparently the result was not interpreted as XML, but my guess is JSON. After some Google searches I believed this had to do with the MIME type, but I never found out how to change that to XML for this service.

So I continued searching and found something else, I was reading these posts: http://social.msdn.microsoft.com/forums/en-us/asmxandxml/thread/F80BDA62-C87A-4BDA-8CB1-F2CFAD1C8891 Uncaught SyntaxError: Unexpected token < -- in jQuery ajax

Where apparently it might be a 'cross-domain issue'.

So I ended up with creating these files:

clientaccesspolicy.xml

<?xml version="1.0" encoding="utf-8"?>
<access-policy>
  <cross-domain-access>
<policy>
  <allow-from http-request-headers="*">
    <domain uri="*"/>
  </allow-from>
  <grant-to>
    <resource path="/" include-subpaths="true"/>
  </grant-to>
</policy>
  </cross-domain-access>
</access-policy>

crossdomain.xml

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<?xml version="1.0" ?> 
<cross-domain-policy>
    <allow-access-from domain="*" /> 
    <allow-access-from domain="*.otherdomain.com" secure="false" /> 
</cross-domain-policy>

<configuration>
    <system.serviceModel>
        <bindings>
            <basicHttpBinding>
            <binding name="GetCountries" maxBufferSize="2147483647" maxReceivedMessageSize="2147483647"> 
                <security mode="None" />
            </binding>
            </basicHttpBinding>
        </bindings>
        <client>
            <endpoint address="http://www.mydomain.com/geolocation.asmx"
            binding="basicHttpBinding" name="GeoLocation" />
        </client>
    </system.serviceModel>
</configuration> 

In the first example link that user also added attributes bindingConfiguration="DashboardServiceSoap" and contract="DashboardService.DashboardServiceSoap", but I have no idea what I would have to fill in there for my case.

I'm still stuck, I don't know what is the right track and how to configure my setup.

UPDATE 21-06-2013

Updated my web.config with:

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

I also tried the following 4 configurations:

<System.Web.Script.Services.ScriptService()> _
<System.Web.Services.WebService(Namespace:="http://tempuri.org/")> _
<System.Web.Services.WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
<ToolboxItem(False)> _
Public Class geolocation

    Inherits System.Web.Services.WebService

Scenario 1 and 2 With this method definition:

<WebMethod()> _
Public Function GetCountries(ByVal knownCategoryValues As String, ByVal category As String) As CascadingDropDownNameValue() 

Scenario 1: WITH protocols section in web.config

<webServices>
  <protocols>
    <remove name="Documentation"/>
    <add name="HttpGet"/>
    <add name="HttpPost"/>
  </protocols>
</webServices>  

Works correct on .nl domain Throws method error -1 on .com domain. Chrome Console shows: Uncaught SyntaxError: Unexpected token < GetCountries:1

Scenario 2: WITHOUT protocols section in web.config

Works correct on .nl domain Throws method error -1 on .com domain. Chrome Console shows: GET http://www.otherdomain.com/geolocation.asmx/GetCountries?knownCategoryValues=%22%22&category=%22Country%22&callback=Sys._jsonp0 500 (Internal Server Error) ScriptResource.axd:7773

Scenario 3 and 4 with this method definition:

<WebMethod()> _
<ScriptMethod(UseHttpGet:=True, ResponseFormat:=System.ServiceModel.Web.WebMessageFormat.Json)> _
Public Function GetCountries(ByVal knownCategoryValues As String, ByVal category As String) As CascadingDropDownNameValue() 

Scenario 3: WITH protocols section in web.config

<webServices>
  <protocols>
    <remove name="Documentation"/>
    <add name="HttpGet"/>
    <add name="HttpPost"/>
  </protocols>
</webServices>  

Throws method error 500 on .nl domain. Chrome Console shows: POST http://www.mydomain.com/geolocation.asmx/GetCountries 500 (Internal Server Error) catcher.js:197 Throws method error -1 on .com domain in dropdown. Chrome Console shows: Uncaught SyntaxError: Unexpected token < GetCountries:1

Scenario 4: WITHOUT protocols section in web.config

Throws method error 500 on .nl domain. Chrome Console shows: Failed to load resource: the server responded with a status of 500 (Internal Server Error) Throws method error -1 on .com domain in dropdown. Chrome Console shows: GET http://www.otherdomain.com/geolocation.asmx/GetCountries?knownCategoryValues=%22%22&category=%22Country%22&callback=Sys._jsonp0 500 (Internal Server Error)

Also I'm not explicity calling the .asmx from script, I let the cascading dropdown do that work for me. Like so:

<asp:DropDownList ID="ddlCountries" CssClass="textbox" AutoPostBack="true" runat="server"></asp:DropDownList>
<cc1:cascadingdropdown ID="cddCountries" runat="server" Category="Country" Enabled="True" LoadingText="<%$Resources:Glossary,loading %>" PromptText="<%$Resources:Glossary,country_choose %>" 
ServiceMethod="GetCountries" TargetControlID="ddlCountries">
</cc1:cascadingdropdown>

code-behind

cddCountries.ServicePath = "http://www.mydomain.com/geolocation.asmx"

I don't know if the fact that I'm using these pre-defined elements have anything to do with my issue, and I could better call the .asmx service via script myself and fill the dropdowns. If so: I have no idea how to do so.

Answer 1

You are correct that this is a cross-origin problem. There are several ways of handling this:

1. You can turn your web service into JSONP as long as the data that needs to go to the web service is not terribly large. The data coming from the service can be as large as you like though. By not terribly large, it must be about 2k characters or less - you can calculate the amount of data that can be sent in one JSONP request by knowing that it is sent as part of the get request from the src attribute of the script tag.

   Here's a good SO answer on JSONP with which you may already be familiar:

   What is JSONP all about?

   UPDATE

   Here's an example of doing JSONP in VB.NET:

   http://www.sattsoft.com/tutorials/contents/1/14/cross-domain-call-using-ajax-jquery-jsonp-and-vb-net-web-service.html

2. You can create a sub-domain of www.wunderweddings.com, call it perhaps "api.www.wunderweddings.com" and use DNS to point that subdomain to the right place using either an A or CNAME record. Then you would embed a tiny (invisible) iframe into your client-side page that would point to this new api host (be sure to specify the src as "//api.www.underweddings.com" so as to match http/s of the containing page), and use javascript within the iframe to promote its document.domain to www.wunderweddings.com which you may do through script injection but its easier to just have that page on the server provide the script to do it, then you can communicate freely between the iframe which points to your api and the page containing the iframe which is at www.wunderweddings.com. So code inside the iframe would go access the web service for you, get the data, promote its document.domain, and notify the containing page.

3. If you know postMessage is always available on your clients (probably not though) you can do the above without changing the document.domain.

4. Points 2 and 3 above probably sound like a hassle! Especially if you intend to expand the web services you offer and/or the number of domains accessing that service. If so, I would very highly recommend utlizing EasyXDM, it is a wonderful and quite powerful library for doing client-side cross-domain RPC:

   http://easyxdm.net/wp/

   EasyXDM provides fallbacks from postMessage if it isn't available such as communication through the hash or the name attribute, among a few other things.

5. You can fix the crossdomain.xml. Now here's where I'm a little rusty but I'll give you my best guess:

UPDATE

You want your crossdomain.xml to like this:

<?xml version="1.0" ?> 
<cross-domain-policy>
    <allow-access-from domain="*" /> 
    <allow-access-from domain="*.wunderweddings.com" /> 
</cross-domain-policy>

The first child of the "<cross-domain-policy>", that is "<allow-access-from domain="" />" will make it completely unrestricted whereas "<allow-access-from domain=".wunderweddings.com" />" will make it so only wunderweddings.com and subdomains will be allowed to do a crossdomain call by the browser. You don't need both "allow-access-from" tags, but at least one of them.

I'm not sure why that configuration stuff is in there, it shouldn't be. I completely failed noticing that the first time around, that is almost certainly your problem. Also make sure that crossdomain.xml is being served from the other server, the one with the web service.

So just to clarify, that crossdomain.xml should not have that extra XML at the bottom, the <onfiguration>...</configuration> tags and everything inside of it, all of that is leaking in from someplace and shouldn't be inside crossdomain.xml

---

FINAL UPDATE

For those reading this answer who have a similar problem, Floran discovered the problem with the invalid character:

this had to be added to the top of the page:

<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server"> 
<Services> 
<asp:ServiceReference Path="geolocation.asmx" /> 
</Services> 
</asp:ScriptManagerProxy>

---