jquery cross-domain post to wcf service without proxy

Question

I have a complicated solution I am attempting to solve.

I have a wcf service (.net 4.0) hosted on Server 1. Server 1 is PCI compliant.

Server 2 is a client web site. This website has a credit card form hosted. It also has a jquery plugin which hijacks the form post. Server 2 is not PCI compliant.

The data in the credit card form cannot be posted to Server 2.

So, I am trying to call my wcf service (json in, json out) from my jquery plugin. I can't use a proxy on Server 2 because that would mean my post data goes to that server.

So, the form data must go from the client machine directly to server 1 while bypassing server2 completely.

I saw several posts about using a crossdomain.xml file on Server 1, however I still get an error:

XMLHttpRequest cannot load http://server1/MySite.Services/PaymentService.svc/SubmitCreditCardPayment . Origin http://server2 is not allowed by Access-Control-Allow-Origin.

Is there any way to do a cross-domain ajax call to a WFC service with json in and json out?

I am not bound to using jquery ajax to do this. If you have another solution that uses jquery to send the data cross domain, I would love to hear it.

EDIT:

To clarify, here's what my service looks like.

PaymentResponse SubmitCreditCardPayment(CreditCardRequest request);

The request and response objects are just classes with properties ( DataContract / DataMember ).

Answer 1

Have you tried JSONP ?

This is a simple way to call a service on server1 from the client, by using a script tag which has no limitation on source target. To get that json response interpreted in your js env you need a callback (say foo(data) ) and you need to set this callback name on the ajax query as a GET parameter. And the targeted ajax service will enclose his json response by a call to foo; foo({json: things}) .

Edit: Responding to your remark;: you've tested JSON-P but it is not secured (and use GET):

You're right JSON-P is not very good for security. But CORS would reduce the number of browser allowed for your application (only very recent browsers). The error message you have is a CORS error message. If you made your request in js then you just have a problem in your implementation of CORS, older browser would need a JSON-P fallback.

So even using by jQuery magic ajax functions you will have the problem of either using bad securized json-p or bad supported CORS.

One other solution is having server2 as a subdomain of server1, but for credit card payments I assume it's not your case.

The crossdomain.xml file exists only for Flash application, not js, but you could use it to make the whole ajax process in flash (gasp), reducing the number of people allowed to use your application again, but based on (recent) flash support. OMG I'm talkning about flash as a real solution...