Make ajax call cross domain

Question

I have an ajax call I would like to become cross domain how can I do this? The script is below

$.ajax({
        type: "GET",
        url: url,
        data: {sendername: sendername, email: email, subject: subject, message: message},
        dataType: "jsonp",
        crossDomain: "true",
        success: function (data) {
            if (data == 'success') {
                // show thank you remember to add a dialog inside
                $contactpage.find('.contact-thankyou').show();
                $contactpage.find('.contact-form').hide();
            }  else {
                alert('Unable to send your message. Please try again.'); //remember to add a dialog inside
            }
        }
    });

The url returns the following echo json_encode($result); the value of $result can be success if successful and anything else if unsuccessful.

the PHP ends with this echo $_GET['callback']."(".json_encode($result).");";

Setting `crossDomain: true` won't magically work if the CORS header isn't set on the host. This should be auto-detected anyway. — Andrew Mao, Mar 26 '13 at 02:01
possible duplicate of [JQuery ajax cross domain](http://stackoverflow.com/questions/3506208/jquery-ajax-cross-domain) — Nix, Mar 26 '13 at 02:02
@AndrewMao ok am not sure what the CORS header is but I have many other scripts that work cross domain and the only difference I can see is that there is a datatype a callback and jsonp datatype — Kern Elliott, Mar 26 '13 at 02:05
@Nix it gives part the answer but not even with the change it doesn't work — Kern Elliott, Mar 26 '13 at 02:09
When I click the button to start the ajax call nothing happens. Its not an issue with the button because it works otherwise — Kern Elliott, Mar 26 '13 at 02:32
Ok I solved this issue it had to do with the return of the values by the webservice — Kern Elliott, Mar 26 '13 at 14:40

pdschuller · Answer 1 · 2013-03-26T03:08:00.873

You can request and get jsonp ONLY IF the web service you are hitting is set up for cross domain access, so your ajax call has to be right and the webservice has to be right.

ajax call

            $.ajax({
            type: "GET",
            cache: false,
            dataType: 'jsonp',
            // we are setting base_url at the top, like http://www.MyDomain.com/MyPage.svc/
            url: base_url + "GetGfeQuote?strJsonRequestObject=" + JSON.stringify(LoadedGetQuoteObject()),
            contentType: "text/plain",
            success: function (theJson) {
                // I make sure I got json
                if (theJson.indexOf('{') > -1 ) {
                    glb_the_quote = $.parseJSON(theJson);
                    if (glb_the_quote.errorMessage.length == 0) {
                        PopulateResultsPage();                            
                    } else {
                        alert('There was an error getting the quote: ' + glb_the_quote.errorMessage);
                    }
                } else {
                    alert(theJson)
                }
            },
            error: function (req, status, error) {
                if(status == "timeout"){
                    ShowNoInternetConnectionWarning();
                } else {
                    alert("There was an internet error = " + status + ", " + error);
                }
            },
            // this gives the webservice 7 seconds to return
            timeout: 7000
        });
        // end ajax;

Now the webservice: At one point it seemed that I had to have a web config, configured correctly, in the same dir as the webservice code - the .svc file - so that is what I do.

This is all I put in my svc file:

<%@ ServiceHost Language="C#" Factory="System.ServiceModel.Activation.WebServiceHostFactory"  Debug="true" Service="gfeWebService.ws.wsGfe" CodeBehind="wsGfe.svc.cs" %>

And the webconfig has to have stuff like the following (note crossDomainScriptAccessEnabled="true" )

<system.serviceModel>   
            <behaviors>
                    <endpointBehaviors>
                        <behavior name="webHttpBehavior">
                            <webHttp />
                        </behavior>
                    </endpointBehaviors>
                </behaviors>

                <bindings>
                    <webHttpBinding>
                        <binding name="webHttpBindingWithJsonP" crossDomainScriptAccessEnabled="true" />
                    </webHttpBinding>
                </bindings>

                <!-- the names have to be fully qualified. If you get an error that says, I can't find blah blah, you don't have the names right -->
                <services>
                    <service name="gfeWebService.ws.wsGfe"> 
                        <endpoint  address=""
                                   binding="webHttpBinding"
                                   bindingConfiguration="webHttpBindingWithJsonP"
                                   contract="gfeWebService.ws.IwsGfe"
                                   behaviorConfiguration="webHttpBehavior"
                        >
                        </endpoint>
                    </service>
                </services>

</system.serviceModel>

Tips

put a break point in you js code near the url: line, grab the value that is ending up in url: ... in other words, grab how this resolves

base_url + "GetGfeQuote?strJsonRequestObject=" + JSON.stringify(LoadedGetQuoteObject())

and paste it in the address box of your browser. You get a more meaningful error message that way.

have Fiddler running while you work on this, and check out what is being sent n received.

HTH

score 0 · Answer 2 · answered Mar 26 '13 at 03:30

0

You can use YQL to get around CORS, as long as you're only doing GET requests, and not using sessions or anything tricky.

    $.getJSON("http://query.yahooapis.com/v1/public/yql?" +
        "q=select%20*%20from%20html%20where%20url%3D%22" + encodeURIComponent( base_url + "GetGfeQuote?strJsonRequestObject=" + JSON.stringify(LoadedGetQuoteObject())) +
        "%22&format=xml'&callback=?",
        function (theJson) {
            // ...
        }
    );

answered Mar 26 '13 at 03:30

000

26,951
10
71
101

sorry i dont want to use that API – Kern Elliott Mar 26 '13 at 11:16
in terms of the php is there anything i need to include within my php script am seeing I dont have a way of actually "getting" the data sent to the service. However in firebug am not even reaching that far to reach the webservice – Kern Elliott Mar 26 '13 at 11:18

Make ajax call cross domain

2 Answers2

Linked