We help IT Professionals succeed at work.

ajax jquery cross domain issue

ITsolutionWizard
on
I am writing a ajax jquery to call wcf and have following error in chrome. IE is working fine. how can I fix it in jquery?


The 'Access-Control-Allow-Origin' header has a value

'http://pq.abc.com?divCode=20'

that is not equal to the supplied origin. Origin

'http://pq.abc.com' is therefore not allowed access.
Comment
Watch Question

Commented:
The 'Access-Control-Allow-Origin' header should NOT contain anything after the domain name.

It should be this:
http://pq.abc.com

NOT this:
http://pq.abc.com?divCode=20

Author

Commented:
I need to pass query string

Commented:
You can still pass the query string in the script.  You should NOT pass the query string in the header.

Author

Commented:
I do the following. And I do not think I pass it to the header.
Or you have any ideas how to fix with following codes.
Again, the codes working in IE. not in Chrome.

function GetModelList(divisCode)
      var customerNo = "315217";            
        var GetModelListJSon = "http://clientaccesstest.abc/GetModel";            
        $(document).ready(function () {
            $.ajax({
                cache: false,
                type: "GET",
                async: false,
                dataType: "json",
                contentType: 'text/plain',
                url: GetModelListJSon + encodeURIComponent("(011,115217)"),
                success: function (data) {
                    $('#data').html(data);
                    if (data == null)
                        return;
                    resultObj = jQuery.parseJSON(data);
                    if (resultObj.Status != 'Failed') {
                        $('#json').html(setModelInfo(resultObj.Data,divisCode));
                    }
                },
                error: function (xhr,status,error) {
                    $('#data').html(xhr.responseText);
                    alert(xhr.responseText + " : error GetModelListJSon");
alert(status);
alert(error);
                }
            });
        });
}

Commented:
You don't need to change the JavaScript/jQuery code!

You need to change the code on the server.  Depending on your setup, you might need to use .htaccess or PHP or ASP.NET or some other server-side language to change the header.

Author

Commented:
the service is wcf and we already added the header to codes and iis.

Commented:
Well then wcf or IIS needs to be changed so that the header returned is this
http://pq.abc.com

NOT this:
http://pq.abc.com?divCode=20

Author

Commented:
I do not know what you mean. Please show me example.

Commented:
Do you know what code or setting is creating the 'Access-Control-Allow-Origin' header?

Author

Commented:
<system.webServer>
    <modules runAllManagedModulesForAllRequests="true"/>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="Content-Type, Accept" />
        <add name="Access-Control-Allow-Methods" value="POST,GET,OPTIONS" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>

Author

Commented:
In chrome, I can see status is 200 and response value showing up. But I keep getting this

The 'Access-Control-Allow-Origin' header has a value 'http://pq.abc.com?divCode=31' that is not equal to the supplied origin. Origin 'http://pq.jvc.com' is therefore not allowed access.

Commented:
Would you post a screenshot of the header response as you see it in Chrome?

Author

Commented:
see attached
testing.jpg

Commented:
Thanks, I want to see what is on the network tab.  See attached.
Image85.png

Author

Commented:
What hi expect to see

Commented:
I want to see all of the response headers returned by this URL:
http://pq.jvc.com?divCode=31

I cannot test it myself because it is password protected.

Author

Commented:
see attached
testing2.jpg
Commented:
The image shows that 13 Response Headers are returned.  

Access-Control-Allow-Origin: http://pq.abc.com

I see that you have added something to your web.config file to create an "Access-Control-Allow-Origin" header however it is not taking effect.  I am not an IIS expert.  I recomend that you post a new question in the IIS and ASP.NET topic areas asking how to get that header there.  If you include an image and a link to this question that should be able to help.

Good luck!