跨域 ajax POST 到 web-api 总是返回空响应

Question

我想将 HTML 表单发布到 web-api。

如果我在其他域中使用 jQuery 执行 ajax POST，一切正常，我收到 200 OK 但 在萤火虫和响应选项卡中，我收到如下图所示的空白响应。 这是我的 jQuery 代码：

var formData = new FormData($('form')[0]);
                var response = '';
                $.ajax({
                    url: 'http://localhost:2143/api/controller',
                    type: 'POST',
                    // Form data
                    data: formData,
                    //Options to tell JQuery not to process data or worry about content-type
                    cache: false,
                    contentType: false,
                    processData: false,
                    success : function(text)
                     {
                         response = text;
                         alert(response);
                     }
                });

请帮帮我...

Answer 1

由于浏览器内置same origin policy restriction，不允许执行跨域AJAX 调用。您有几个可能的解决方法：

1. JSONP - 这里的想法是您的服务器会将 JSON 响应包装在回调中。这仅适用于 GET 请求，因此从我可以看到您尝试发送 POST 请求的情况来看，它可能不适合您的情况。您可以使用自定义的JsonpMediaTypeFormatter，如this similar post 所示。
2. CORS - 服务器应该发送一个特殊的 Access-Control-Allow-Origin 响应 HTTP 标头。这里的缺点是旧浏览器可能不支持它。这是blog post 更详细地介绍了这一点。
3. 服务器端网桥。如果前两种技术由于它们施加的限制而对您不起作用，您可以在托管您的 javascript 的域上拥有一个服务器端脚本，该脚本将充当您的域和托管 API 的远程域之间的代理。在这种情况下，您会将 AJAX 请求发送到您自己的域，然后该域将调用远程 API 并将结果返回给客户端。