ajax jquery cross domain issue

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.
LVL 1
ITsolutionWizardAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

skijCommented:
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
0
ITsolutionWizardAuthor Commented:
I need to pass query string
0
skijCommented:
You can still pass the query string in the script.  You should NOT pass the query string in the header.
0
Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

ITsolutionWizardAuthor 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);
                }
            });
        });
}
0
skijCommented:
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.
0
ITsolutionWizardAuthor Commented:
the service is wcf and we already added the header to codes and iis.
0
skijCommented:
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
0
ITsolutionWizardAuthor Commented:
I do not know what you mean. Please show me example.
0
skijCommented:
Do you know what code or setting is creating the 'Access-Control-Allow-Origin' header?
0
ITsolutionWizardAuthor 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>
0
ITsolutionWizardAuthor 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.
0
skijCommented:
Would you post a screenshot of the header response as you see it in Chrome?
0
ITsolutionWizardAuthor Commented:
see attached
testing.jpg
0
skijCommented:
Thanks, I want to see what is on the network tab.  See attached.
Image85.png
0
ITsolutionWizardAuthor Commented:
What hi expect to see
0
skijCommented:
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.
0
ITsolutionWizardAuthor Commented:
see attached
testing2.jpg
0
skijCommented:
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!
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
AJAX

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.